Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

Multi-line text boxes

To set up a text box with more than one line, you use the <textarea> tag. It creates a box in the form complete with the necessary scroll bars. For example:

This HTML…

Displays as…

<form>
Address:
<textarea cols="20" rows="5">
</textarea>
</form>

The cols attribute specifies the width of the box in characters and the rows attribute the number of lines you want.

In the <textarea> tag, you can type in plain ASCII text. You often see this on pages as a box for comments or as a way to provide instructions:

This HTML…

Displays as…

<form>
<textarea cols="20" rows="5">
Enter a description of the
error give as………
</textarea>
</form>

You can not put any other HTML tags or formatting in the tag.

One thing to watch for: if you enter information into a text area created by Netscape, all of the text appears on a single line unless you enter a carriage return. This can seem a bit odd because people expect text to wrap automatically (like in a word processor). Internet Explorer, on the other hand, wraps as you type.

You could use the wrap attribute for the <textarea> tag to make sure text wraps:

<textarea cols="20" rows="5" wrap="on">

You can also use wrap="off" to disable word wrap in Internet Explorer.

Two other wrap options:

  • Set wrap="virtual" to wrap lines on the screen but don’t put carriage returns in the text. This option means that your script still receives the text as a single line, with the only line breaks occurring where you type them
  • Set wrap="physical" to wrap lines on screen and to include carriage returns in the text. Your server-side scripts sees separate lines of text where the browser wrapped the text and where you entered a carriage return

You can also use the name attribute to add an internal name to the field so the program that handles the form can identify the fields.