Webmaster Resources Center

Welcome to the Bravenet Resource Center. Use these resources to help make your web pages more advanced and fun to use.

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:

  1. NAME - unique name for this text field
  2. ROWS - how many rows high the text box should be
  3. 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:

<textarea

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:

<textarea name="unique_name"

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:

<textarea name="unique_name" rows="4"

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:

<textarea name="unique_name" rows="4" cols="30">

Now, here is our finished <textarea> code, complete with its required closing tag:

<textarea name="unique_name" rows="4" cols="30"></textarea>

And here is how it will appear on a webpage:

Type some sample text into this text box:

If you want to pre-fill the text box with some text, add your text between the opening and closing text area boxes:

<textarea name="unique_name" rows="4" cols="30">
Here is some sample text
</textarea>

This will be displayed on your page like this:

Type some text into this text box:

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)