textarea 下方的代码作为其值进入 textarea 内部？

Question

我正在通过单击按钮实现此 Bootstrap 模式。但是在点击按钮时，模态出现在屏幕上，除了文本区域字段之外的每个字段都正确显示，按钮代码和文件上传代码在它下面，正在进入文本区域，为什么会这样？请检查以下模态代码：

<div class="modal fade" id="myModalContactt" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content tuningModal">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body tuningModalTwo">
                <form action="/tuningModal/"  style="padding: 0% 7%;">
                    <h3>GET IN TOUCH WITH US</h3>
                    <div class="row form-group">
                        <label>Your Name(required)</label>
                        <input type="text" class="form-control" id="name" name="name"/>
                    </div>
                    <div class="row form-group">
                        <label>Email(required)</label>
                        <input type="email" class="form-control" id="email" name="email"/>
                    </div>
                    <div class="row form-group">
                        <label>Phone Number</label>
                        <input type="text" class="form-control" id="phone" name="phone"/>
                    </div>
                    <div class="row form-group">
                        <label>Car Brand</label>
                        <input type="text" class="form-control" id="carBrand" name="carBrand"/>
                    </div>
                    <div class="row form-group">
                        <label>Model</label>
                        <input type="text" class="form-control" id="model" name="model"/>
                    </div>
                    <div class="row form-group">
                        <label>Your Message</label>
                       <textarea rows="10"  class="form-control" id="message" name="message"/>
                    </div>
                    <div class="row form-group">
                        <label>Upload your software(Note:please upload in zip filetype)</label>
                        <input type="file" class="form-control-file" name="softUploadFile"/>
                    </div>
                    <div class="row form-group" style="margin-top:20px;margin-bottom:20px">
                        <button type="submit" class="btn btn-primary btn-block">Submit</button>
                    </div>
                </form>
            </div>

        </div>

    </div>
</div>

下面是我将数据目标和数据切换设置为此模式的按钮的代码：

<div id="red_div2" class="row ">
    <h2 id="redtext2" class="wow bounceInRight">QUESTIONS OR INTEREST IN ANY OF OUR PRODUCTS? </h2>
    <button type="button" class="btn btn-info" id="AskYourQuestion" data-toggle="modal" data-target="#myModalContactt">
        ASK YOUR QUESTION
        <i class="fa fa-angle-double-right"></i>
    </button>

</div>

它在浏览器中显示如下：

Answer 1

关闭textarea标签

 <textarea rows="10"  class="form-control" id="message" name="message"></texarea>

Answer 2

<textarea rows="10"  class="form-control" id="message" name="message"/>

textarea 不是 self-closing 标签（也称为 void 元素）。

Self-closing 标签允许标签本身的关闭部分，例如 <input/> 而非 self-closing 标签必须具有明确匹配的关闭标签，例如：

<textarea></textarea>

这些通常是标签内可能有内容的地方，例如

<textarea>appears inside the textarea</textarea>

来自规范的更多信息：https://www.w3.org/TR/html5/syntax.html#writing-html-documents-elements

和

textarea 下方的代码作为其值进入 textarea 内部？

Code below the textarea getting inside the textarea as its value?

html

javascript

forms

jquery

textarea