Multi-Line Text Area
A multi-line text area is available for lengthy passages of text that may contain line breaks. If a datum is expected to be small (less than 60 characters) use a standard text field instead.
Basics
Bare-bones code for a text area is:
<TEXTAREA ROWS="4" COLS="30"></TEXTAREA>
Strictly speaking, you do not need to specify the number of rows and columns, as the browser will render it at a default size. However, the default size is seldom very useful (it tends to be very small).
Usage
Use a text area to capture large amounts of text that will be passed to the server as a single, long string.
Processing
Each text area passes a name=value pair where the value is the content of the text area at the time the form is submitted. The WRAP attribute attempts to manage how hard returns are passed, which is fairly reliable, but the character used to indicate a newline may vary among systems, so it's valuable to standardize them, thus:
$in{'textarea_name'} =~ s/[\n\r\f]+/[\n]/g;
After executing that command, all hard-returns will be encoded as newline characters (\n).
Be careful about how you parse input from a form that contains a text area. A mischievous user might attempt to pass variables to your script by entering data such as "&name=value&name=value". Since the content is urlencorded for transmission, it's not a problem so long as you split the input into name=value pairs before decoding the input.
HTML Attributes
Typical
- ROWS - Indicates the height of the text area in lines of text.
- COLS - Indicates the height of the text area in characters.
Unusual
- ACCESSKEY - A shortcut key to put focus on the element.
- DISABLED - Grays out the element and prevents the user from altering its value.
- TABINDEX - Specified as a number, this alters the default tabbing order of a form.
The text area does not have a VALUE attribute, as that is understood to be any text that appears between the opening and closing TEXTAREA tag.
JavaScript
Properties
- value - Returns (or assigns) the current value of the field.
- defaultValue - Returns (or assigns) the default value of the field
- rows - Returns (or assigns) the ROWS attribute.
- cols - Returns (or assigns) the SIZE attribute.
Methods
- select() - Highlights (selects) the text content within the field.
Event Handlers
- onkeydown - Takes effect when focus is within the element and a key is pressed
- onkeyup - Takes effect when focus is within the element and a key is released
- onkeypress - Takes effect when focus is within the element and a key is pressed and released
- onselect - Takes effect when some text in the field has been selected by the user
Misc Notes
There was, at one time, a WRAP attribute that controlled whether the browser would pass newline characters where text wrapped. I believe it's been deprecated, and as I recall, it never worked consistently anyway.
There was also a warning at one time that some browsers and servers put a limit on the amount of data that could be passed/accepted on a query string, and advice to use the POST method to submit any form containing a text area. I never ran into that problem, but my sense is it's good advice to keep the query-string manageable.
There is no MAXLENGTH attribute to limit the amount of text that can be entered into a text area. If it's important to impose a limit, you may need to resort to a JavaScript hack.