Forms — Textareas

Topics on This Page

The <textarea> Tag
The name Attribute
The rows and cols Attributes
The wrap Attribute
Textareas and <font>
Textareas and CSS
Example

The <textarea> Tag

<textarea>...</textarea>

Always include these attributes:

  name="name"
  rows="number-of-rows"
  cols="number-of-columns"
  wrap="off|virtual|physical"       [Proprietary, widely supported]

Unlike text boxes, which are defined with an empty tag, textareas are defined by a tag that accepts content. Between the <textarea> and </textarea> tag, include any text that you want to appear initially in the textarea. If you want the textarea to start out empty, place the </textarea> tag on the same line as the <textarea> and with no intervening spaces — otherwise, the textarea will begin with one or more spaces and the cursor will be positioned with spaces before it in the textarea.

The name Attribute

The name attribute provides a name that becomes associated with the data that the user enters. When the form is submitted, a "name-value" pair is sent for each textarea. The name portion is the name that you specify in name, and the value is whatever the textarea contains when the user submits the form. It's best to select simple and fairly short names that consist only of alphabetic characters and digits, with an alphabetic character as the first character.

The rows and cols Attributes

rows and cols specify the number of rows and columns you want the textarea to contain.

Unlike text boxes, the default font in a textarea is a fixed-width font, at least in IE and Netscape. The cols attribute in most browsers is therefore an accurate count of the number of characters that will fit on each line.

The wrap Attribute

The wrap attribute specifies whether or not word wrapping is enabled in the textarea. wrap="off" disables word wrapping. wrap="virtual" and wrap="physical" both request word wrapping. wrap="virtual" simply wraps the words but sends the data as if word wrapping was not done. wrap="physical" sends a line-feed character at the end of each line.

To demonstrate the difference word wrapping makes, here are three textareas. The first uses wrap="virtual" so that word wrapping is enabled. The second uses wrap="off" so that word wrapping is disabled. Try typing some text into both boxes so that you're sure you know what the difference is. The third has no wrap attribute at all so that you can determine which value your browser is using by default.

Netscape 4   and earlier	Default: wrap="off" Supports the wrap attribute
Netscape 6	Default: wrap="virtual" Ignores the wrap attribute
IE	Default: wrap="virtual" Supports the wrap attribute

If you're like me, you'll find that it's MUCH nicer to enter data in a textarea in which word wrapping is enabled. Unfortunately, Netscape chose wrap="off" as the default value for all versions before Netscape 6. For this reason, I strongly suggest that you include wrap="virtual" in all <textarea> tags — at least, if you have any interest in supporting Netscape users.

Given that Netscape chose wrap="off" as its default, it's even more unfortunate that the W3C chose not to include wrap as a valid option in the <textarea> tag. This means that you'll need to expect an error message from the validator when you validate a page in which you've used wrap. But assuming you're more interested in making your page usable for your users than in satisfying the validator, you'll overlook these messages and keep the wrap="virtual" in your <textarea> tags. No browser will mind if you include wrap="virtual": those that don't recognize it will simply ignore it.

Textareas and <font>

You may find that you want to use a different font face, size or color for the text in a textarea. The <font> tag isn't much help. Netscape 4 will honor a font face and size specified in a <font> tag. IE and Netscape 6 will not honor any <font> characteristics.

The following example uses this code:

<form>
  <font color="red" size="4" face="comic sans ms">
  <textarea name="f2a" rows="3" cols="30" wrap="virtual"><textarea>
  </font>
</form>

Netscape 4 supports the size and face attributes of <font>, but not color. IE and Netscape 6 ignore the <font> tag altogether.

Textareas and CSS

IE and Netscape 6 support CSS attributes for text boxes. In the <head> section of this page, I've included the following:

<style type="text/css"> <!--
  .a { background: #ffffcc;
       color: #ff0000;
       font-size: 16pt;
       font-family: "comic sans ms", arial, helvetica, sans-serif; }
--> </style>

Here's an example of a textarea that uses this class:

<form>
  <textarea name="f4a" rows="3" cols="30" wrap="virtual"
            class="a"></textarea>
</form>

Netscape 4 ignores the CSS formatting. IE and Netscape 6 support all of the properties.

Example

Here's an example of a textarea.

Try changing the attributes of the textarea, and experiment with additional CSS properties such as font-weight: bold;.

If you validate this code, you'll find that there's an error message about the wrap attribute in the <textarea> tag.