Forms Tutorials
Text Area Fields
The <textarea> tag creates a multi-line input text field that allows visitors to add a lot more text than the normal <input> fields will allow. This is useful when you want visitors to send long answers to questions, or provide more details about a topic, and so on.
The <textarea> tag is made up of both an opening and closing tag. It has several attributes that should be defined for best results:
- NAME - unique name for this text field
- ROWS - how many rows high the text box should be
- COLS - how many columns wide the text box should be
Let's write a basic <textarea> tag, step by step, to show how the tag is correctly coded. First we start with the opening textarea tag:
The name should always be something unique that identifies what the field is for. If you were gathering street addresses in this field, for example, you could give this field a name like "address" or "street_address". Add the name like this:
The rows attribute allows you to define how many rows high the text box will be displayed as. Usually, 3 or 4 rows will be sufficient to allow visitors to enter a lengthy answer, but you can choose a bigger box if you need it, by increasing the number of rows. For our example, lets build our text box 4 rows high:
The cols attribute allows you to define how many columns wide the text box will be displayed as. The only drawback to using this setting is that column widths are slightly different from one browser to the next, so your text box will appear slightly differently in different browsers. For our example, let's build our text box 30 columns wide:
Now, here is our finished <textarea> code, complete with its required closing tag:
And here is how it will appear on a webpage:
If you want to pre-fill the text box with some text, add your text between the opening and closing text area boxes:
Here is some sample text
</textarea>
This will be displayed on your page like this:
Note: The text in the text box is not affected by font tags or other HTML formatting codes, it is always displayed in the default browser font as shown above. (You can use CSS coding to alter the look and color of text in this field)
Return to 'Hidden Inputs' Proceed to 'Check Boxes'
