HTML Form Tutorial, Part II

By Will Bontrager
2005-03-22


The <textarea> Tag
The first of this 2-part series showed you how to use the <form> tag and the many uses of the <input> tag, including hidden fields. This second part completes the tutorial with multi-line text input areas, selection lists, and a complete form using all the examples and a script to process the form's information.

The <textarea> Tag

When asking for multi-line input from the form user, use the <textarea> tag.

The optional attributes "cols" and "rows" specify how many characters wide and how many lines deep to make the text area input field. If these are not specified, individual browsers will use their own default sizes.

The optional attribute "wrap" specifies what to do with lines that are longer than the width of the text area input field.

wrap="off" specifies that the text is displayed exactly as typed. No lines will wrap.

wrap="hard" specifies that any line that is longer than the width of the text area input field will wrap to the next line. When the information is sent to the processing program or function, the hard wraps will be sent with the information.

wrap="soft" is the same as "hard" except the wrap applies only to the visual text area input field. The soft wraps are removed before the information is sent to the processing program or function.

Which wrap attribute you choose depends on the type of information the text area field will hold and your preference. If you're asking for multi-line postal addresses, you'll probably want "off" so the line-by-line formatting of the addresses are not compromised. For free-form text paragraphs, "soft" may be appropriate. If the line lengths must not exceed a certain number of characters (when pre-formatting for an outgoing email, as example), then "hard" is the logical specification.

If you do not specify a wrap attribute, wrap="off" is assumed.

Anything between the <textarea> and </textarea> tags, including spaces or tabs, will be put into the text area field when the form is loaded. If you don't want any default text, keep those two tags together.

<form method="POST" action="/cgi-bin/handler.cgi">
<textarea name="message" cols="20" rows="5"></textarea>
<input type="submit">
</form>

Tutorial Pages:
» The <textarea> Tag
» The <select> Tag
» A Complete Example


Copyright 2004 Bontrager Connection, LLC

Related Tutorials: » Enrich Your Web Applications » Microsoft Complicates HTML Emails With Outlook 2007 » Testing Your Forms for Hijacking Vulnerability » Control Your Domain Registration Data » HTML Forms POST, GET » HTML Tables