The HTML Form - Textarea Tag

Guest Author - Diane Cipollo

The HTML textarea tag is used to create a multi-lined text input field within a webpage form. If you only want to collect one line of user input, you would use the text input tag. However as the name implies the textarea tag is used to collect user input that is more than one line. Below is an example of a textarea tag input field.

Below is the basic code for the textarea tag.

<textarea name="comments" rows="3" cols="30">Your

comments here</textarea>

left angle bracket

textarea

element name

name

attribute used to identify this input

rows

attribute used to determine the number of lines of text that will be displayed

cols

attribute used to determine the number of characters per line of text

right angle bracket

</textarea>

closing tag

Note--The arrow

indicates that the code is wrapped to a second line and should really be all on one line.

You will notice from the example above that this tag is different from the other tags that we have discussed so far. Unlike the other tags, the textarea tag has both an opening <textarea> and closing </textarea> tag. Any text placed between the opening and closing textarea tags will appear in the textarea input field when the form initially displays on the webpage. The value of the rows and cols attributes will determine the size of the textarea input field on the webpage.

The Name Attribute
The value of the name attribute is a unique identifier for this textarea tag. Each textarea tag creates one multi-lined input field and each must have a unique identifier. This is how the processing program will determine which data came from which textarea input field. When you are setting the value for the name attribute, try to use an ID that will remind you of the purpose of the input field. In the example I have set the value of the name attribute to comments.

The Rows Attribute
The value of the rows attribute determines the number of lines that will be displayed in the textarea input field. If the user's input exceeds this number the scrollbar will automatically be activated. In the example I have set the value of the rows attribute to 3.

The Cols Attribute
The value of the cols attribute sets the number of characters per line of text that will be displayed in the input field. When the number of characters entered into the field exceeds this value, the remaining input will be displayed on the following line(s). In the example I have set the value of the cols attribute to 30.

|