How to Create a Multi-line Text Input (Text Area) In HTML

In this article, we're going to show how you can create a multi-line text input (also called text area) in HTML.

Below is a multi-line text input in HTML which is very common in forms on the web, such as a website that is trying to elicit information from a customer:

Additional Comments:

In a multi-line text input, a user has more space to type in way more characters than he would be able to with a single-line text field. This comes in use when the user has to enter sentences and sentences of information, or even paragraphs of information.

Coding

To create the multi-line text input above, the HTML code is:

<label>Additional Comments:</label><br> <textarea id="txt_comments" name="txt_comments" rows="10" cols="35"> </textarea> </form>

Code Analysis

Every form element in HTML must be enclosed by the form tag. So in this case, since we are creating a multi-line text input, this must be closed in a pair of opening and closing form tags.

The label tag gives the name of the text box, which in this case is "Additional Comments:".

After this, we now create the actual multi-line text input.

This is done with a pair of opening and closing textarea tags. This tag normally has 3 attributes that must be specified.

id and name- The id and name attributes create an identifier for the field. When you use a programming language to extract data from this element, use id to specify which field you're referring to. An id field often begins with a hint phrase to indicate the type of object is is. So, for instance, txt indicates a text box. Javascript uses the id field to extract information from an HTML element. PHP uses the name attribute to extract information from an HTML element.

Specify size of text box with rows and cols- The attributes rows and cols stand for rows and colums. Rows is the vertical length that a multi-line text input goes down and cols is the horizontal length that it goes across. For, the multi-line text box above, rows="10" and cols="35". You can increase or decrease these values to give a larger or smaller input text area.

After you give the id and rows and cols, make sure you close out the textarea tag.

Unlike the single-line text field that has a "value" attribute, if you want to place a default text in the multi-line text area, then you just place the text in between the opening and closing textarea tags.

To learn how to retrieve data from a multi-line input text form using PHP, see the resource How to Retrieve Data from a Multi-line Text Input (textarea) in PHP.