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

Question

I am implementing this Bootstrap Modal on click of a button. But on clicking the button, the modal appears on screen, every field is correctly displayed except the textarea field, the button code and file upload code below it, is getting inside of the textarea, why is it so ? Please check the following code for the Modal:

<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>

And below is the code for the Button on which I've set the data-target and data-toggle to this Modal:

<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>

And it is appearing like this in the browser:

Basel Issmail · Accepted Answer · 2022-01-30T03:20:44.540

3

Close textarea tag

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

edited Jan 30 '22 at 03:20

answered Mar 08 '18 at 14:36

Basel Issmail

3,847
7
20
36

It is now working with this, but why this behavior as I did close the textarea tag? – Jatin Verma Mar 08 '18 at 14:50
1

@JatinVerma I didn't find the closing tag in your code? :( textarea is not a self-closing tag it needs saparate closing tag. everything between opening and closing textarea tag considered it's value – Basel Issmail Mar 08 '18 at 14:53

score 2 · Answer 2 · answered Mar 08 '18 at 14:53

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

textarea is not a self-closing tag (also called a void element).

Self-closing tags allow the the close part on the tag itself, eg <input/> while non-self-closing tags must have an explicitly matching close tag, eg:

<textarea></textarea>

these are typically where there may be content inside the tag, eg

<textarea>appears inside the textarea</textarea>

More info from the spec: https://www.w3.org/TR/html5/syntax.html#writing-html-documents-elements

and https://stackoverflow.com/a/3558200/2181514

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

2 Answers2