 |
Chapter 10 Forms |
 |
10.3 Multiline Text Areas
The conventional and hidden-text types for forms restrict user input to a single line of characters. The <textarea> form tag sets users free.
The <textarea> Tag
The <textarea> tag creates a multiline text entry area in the user's browser display. In it, the user may type a nearly unlimited number of lines of text. Upon submission of the form, the browser collects all the lines of text, each separated by "%0D%0A" (carriage return/line feed), and sends them to the server as the value of this form element, using the name specified by the required name attribute.
You may include plain text inside the <textarea> tag and its end tag. That default text must be plain text--no tags or other special HTML elements. The contents may be modified by the user, and the browser uses that text as the default value if the user presses a reset button for the form. Hence, the text content is most often included for instructions and examples:
Tell us about yourself: <textarea name=address cols=40 rows=4> Your Name Here 1234 My Street Anytown, State Zipcode </textarea>
The rows and cols attributes
A multiline text input area stands alone onscreen: body content flows above and below, but not around it. You can control its dimensions, however, by defining the cols and rows attributes for the visible rectangular area set aside by the browser for multiline input. We suggest you do set these attributes. The common browsers have a habit of setting aside the smallest, least readable region possible for <textarea> input, and the user can't resize it. Both attributes require integer values for the respective dimension's size in characters. The browser automatically scrolls text that exceeds either dimension.
The wrap attribute
Normally, text typed in the text area by the user is transmitted to the server exactly as typed, with lines broken only where the user pressed the Enter key. Since this is often not the desired action by the user, you can enable word wrapping within the text area. When the user types a line that is longer than the width of the text area, the browser automatically moves the extra text down to the next line, breaking the line at the nearest point between words in the line.
With the wrap attribute set to virtual, the text is wrapped within the text area for presentation to the user, but the text is transmitted to the server as if no wrapping had occurred, except where the user pressed the Enter key.
With the wrap attribute set to physical, the text is wrapped within the text area and is transmitted to the server as if the user had actually typed it that way. This the most useful way to use word wrap, since the text is transmitted exactly as the user sees it in the text area.
To obtain the default action, set the wrap attribute to off.
As an example, consider the following 60 characters of text being typed into a 40-character-wide text area:
Word wrapping is a feature that makes life easier for users.
With wrap=off, the text area will contain one line and the user will have to scroll to the right to see all of the text. One line of text will be transmitted to the server.
With wrap=virtual, the text area will contain two lines of text, broken after the word "makes." Only one line of text will be transmitted to the server: the entire line with no embedded newline characters.
With wrap=physical, the text area will contain two lines of text, broken after the word "makes." Two lines of text will be sent to the server, separated by a newline character after the word "makes."
The style and class Attributes
The style attribute for the <textarea> tag creates an inline style for the text enclosed by the tag, overriding any other style rule in effect. The class attribute lets you format the content according to a predefined class of the <textarea> tag; its value is the name of that class. Be aware that the same disclaimer for applying styles with text-type form elements also apply to the <textarea> (see 2.7). [the section called "Inline Styles: The style Attribute"] [the section called "Style Classes"]
Form <textarea> Event Handlers
JavaScript browsers support four event handlers for the <textarea> tag type. Use the onFocus, onBlur, onChange, and onSelect event handlers to respectively execute a JavaScript program when the user moves the mouse into the text area, when the user moves away from the text input box, when the user has changed the value of the text, and when the user selects the text area to type in some information.
The value of the event handler attribute is--enclosed in quotation marks--one or a sequence of semicolon-separated JavaScript expressions, methods, and function references that the browser executes when the event occurs. For example, you might associate a window alert via the onFocus event with the text area to relay some instructions to the user on what information they should type into that area. See 13.3.3 for more information about JavaScripting and event handlers.
|
 |
|
| Form Input Elements |  |
Multiple Choice Elements |
