Creating Forms Module: Text Areas

Creating Forms

Text Areas

The text area is the odd man out in a form. Unlike a text field, a one-line field with a set limit of characters, the <textarea> and </textarea> tags create a box into which users can type whole paragraphs, if they wish. If you were creating a form to let users send you comments about your site, you’d use a text area to collect those comments.

Unlike an input tag, a text area has opening and closing tags:

<textarea name="comments">
This text will appear inside the box created by these tags.
</textarea>

On a Web page, that code creates a text box:

This text will appear inside the box created by these tags.

Note that while text areas, like all other parts of your form, should have a name attribute, they don’t have a value attribute. If you’d like text to appear inside the text area when your users first load the form, place that text between the <textarea> and </textarea> tags.

Text areas have unique attributes of their own:

• The cols attribute specifies how wide the box will be. It’s the equivalent of the size attribute in a text field. A text area with a cols attribute of “40″ will be 40 letters or numbers wide.
• The rows attribute specifies how deep the box will be. A text area with a rows attribute of “8″ will be eight lines deep.

A third attribute, wrap, answers two questions at once: “On a Web page, how will the text in this box appear to a user?” and “How will the text in this box look when I send it off for processing?”

• Setting wrap to “nowrap” will display the text without line breaks. If you don’t give a text area a wrap attribute, it will automatically set itself to “nowrap.” If you write a long sentence, it will disappear past the edge of the text area. The text will be sent off for processing as one unbroken line:

  The quick brown fox jumped over the lazy dog.

• Setting wrap to “physical” will force the text you type to break each line at the edge of the text area. The text will be readable, but also full of line breaks when you send it off for processing:

  The quick brown
  fox jumped over
  the lazy dog.

• Setting wrap to “virtual” is usually the best of both worlds. It wraps the text on a Web page, so that users can read it easily, but doesn’t add those extra line breaks when it sends the text to be processed.

Here’s the code for a sample text area that combines all the elements we’ve discussed:

<textarea name="comments" cols="40" rows="8" wrap="virtual">
Enter your comments here.
</textarea>

And here’s how that text area would look on a Web page:

Enter your comments here.

You may now recognize that we’ve been using text areas for the “Try It Yourself” features you’ve seen on previous pages. You can’t put a text area inside another text area — most browsers just won’t allow it. That’s why we can’t offer you a “Try It Yourself” feature for this section.