Multiple lines of input in <input type=“text” />

2.7K Asked by BenButler in Tableau , Asked on Jul 16, 2021

I have this text input in a form:

<input type="text"
       cols="40" 
       rows="5" 
       style="width:200px; height:50px;" 
       name="Text1" 
       id="Text1" 
       value="" />

I am trying to get it to take multiple lines of input. The width and height make the box to be bigger, but the user can enter text all (s)he wants yet it fills one line only.

How do I make the input more like a text area? How to get multiline input ?

Answered by Carl Paige

You just have to use a textarea to get multiline handling like this:

Note: To create a multi-line text input, use the HTML tag. You can set the size of a text area using the cols and rows attributes. It is used within a form, to allow users to input text over multiple rows.<br /> </p><br> </div> </div> </div></br> <div class="clearfix"></div> <div class="vote-custom-bx vote-con" role="group" data-postid="3097" data-score="0" data-cast="0"> <div class="wsd-bx" role="group"> <button type="button" data-action="up1" class="btn btn-lg vote vote-" up1> <img src="https://www.janbasktraining.com/community/themes/default/assets/images/icon-up.png" class="img-responsive voteup-cus" alt="icon-up"> <span> Upvote </span> <span class="dot-custom"></span> <span class="total-up"> 0 </span></button> </div> <div class="wsd-bx" role="group"> <button type="button" data-action="down" class="btn btn-lg vote vote-down" disabled="disabled"><img src="https://www.janbasktraining.com/community/themes/default/assets/images/icon-up.png" class="img-responsive votedown-cus" alt="icon-up"> <span> Downvote </span> <span class="dot-custom"></span> <span class="total-down"> 0 </span></button> </div> </div> <div class="clearfix"></div> </div> <div class="reply-box-head"> <h2 class="lead2 blue" style="margin-top:20px;">Your Answer</h2> </div> <div class="reply-box">  <div class="content-box-md"> <form action="https://www.janbasktraining.com/community/ajax_calls/post?topic=3097" id="addPost1" method="post" accept-charset="utf-8"> <input type="hidden" name="sf_token" value="2a21fe493572ab19fc3e095bce498325" /> <div class="form-group" style="margin-bottom:5px;"> <textarea name="body" cols="40" rows="10" class="form-control tip" id="editor" required="required" data-fv-notempty-message="Body is Required<br>For Reply You have to Login First." minlength="2" data-fv-stringlength-message="Body is Required.<br>For Reply You have to Login First.">

Email me when someone reply to thread

Parent Categories