|
HTML Tip:
Including The <TEXTAREA> Element In Forms
by Larisa Thomason,
Senior Web Analyst,
NetMechanic, Inc.
Generally, a form collects very specific data (name, address, email address, etc) using text boxes, radio buttons, and other form elements. The TEXTAREA element gives visitors much more flexibility to input extended free-form text entries (comments, special shipping instructions, etc.).
But before you insert a TEXTAREA box into your form, carefully optimize its display to make it easy for both you and your visitors to use.
TEXTAREA Tag Basic Structure
Create a multiline, scrollable text entry box in your form using opening and closing TEXTAREA tags. The ROWS attribute specifies the number of lines displayed in the box. The COLS attribute defines the width of the box in characters.
If you want to display any instructions inside the element, enter them inside the TEXTAREA opening and closing tags. Text placed between these tags sets the element's initial value and will be submitted with the form unless your visitor deletes it.
<FORM>
Name:
<INPUT TYPE="text" NAME="Name"
SIZE="30" MAXLENGTH="40">
<br><br>
Special Instructions:
<br>
<TEXTAREA NAME="SpecialRequest"
ROWS="3" COLS="25">
Please enter your special instructions
or comments
</TEXTAREA>
<br><br>
<INPUT TYPE="submit">
<INPUT TYPE="reset">
</FORM>
|
This simple form with a TEXTAREA attribute would look like this on your Web page:
Control The Input Display
Use the WRAP attribute to control how the information is displayed on the monitor and submitted to the server. It defines how the input text is wrapped if the user input is longer than the width of the display box.
There are three possible values for WRAP:
- OFF: Text isn't wrapped inside the box unless the user inserts a carriage return with the Enter key and starts a new line.
- PHYSICAL: Text is wrapped inside the box and carriage returns are added at the end of each line when the information is sent to the server.
- VIRTUAL: Text is wrapped inside the box, but sent to the server as a single string without extra carriage returns. This is the default; if you don't use WRAP as an attribute in the tag, all inputs in the TEXTAREA box will display with this option.
|
Both physical and virtual make the user's input task much easier since their input is displayed in a more readable format. This is especially important if you expect visitors to enter more than a sentence or two. TEXTAREA boxes where WRAP=off scroll endlessly to the right unless the user knows to insert a manual carriage return. They're extremely hard for the user to edit, so you risk getting garbled information.
Insert some sample text into the TEXTAREA boxes below. Which ones are easiest to use?
Both Netscape and Explorer recognize all three values. The WebTV browser ignores all but the default value (virtual).
Cross-browser Display Concerns
Since the browser automatically renders form elements, you don't have much control over how forms display on your visitors' monitors. This can be a particular problem in Netscape browsers if the user has changed the constant width font in the browser preferences section. If so, the browser resizes text elements in the form to display the user preference - overriding the Web designer's format.
For instance, a Web designer might expect this sort of form display in Netscape:
However, if the user had set the browser preferences to override the Web page settings and display text in 16 pt. font, the form would display like this:
This change in size can really disrupt your painstakingly designed page layout. Most Internet users don't change their preferences, but those who do may be confused by your page layout.
Although you can't control individual users' displays, you can use HTML Toolbox to identify and correct other cross-browser issues. Our July 2000 newsletter also discusses other display issues you need to consider when building a form.
TEXTAREA Alternatives
The TEXTAREA element may not be your best solution if you need to parse the data after the visitor submits it. Consider whether you could collect the same information more easily with radio buttons, check boxes, or SELECT lists. For instance, have your visitors choose a shipping method from a SELECT box instead of allowing them to enter their preference into a TEXTAREA box.
A TEXTAREA box is a very effective way to process form information whose content you can't accurately predict - but still want to collect from your visitors.
|
