9.7 Multiline Text Areas

9.7 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.

9.7.1 The <textarea> Tag

As part of a form, 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.

<textarea> Function: Creates a multiline text-input area Attributes: accesskey, class, cols, dir, disabled, id, lang, name, onBlur, onChange, onClick, onDblClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onSelect, readonly, rows, style, tabindex, title, wrap End tag: </textarea>; never omitted Contains: plain_text Used in: form_content

You may include plain text inside the <textarea> tag and its end tag (</textarea>). That default text must be plain text, with no tags or other special 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>

9.7.1.1 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 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.

9.7.1.2 The wrap attribute

Normally, the browser sends the text that you type into the text area to the server exactly as typed, with lines broken only where the user pressed the Enter key. Since this is often not the action desired 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 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 that are 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 contains one line and the user must scroll to the right to see all of the text. One line of text is transmitted to the server.

With wrap=virtual, the text area contains two lines of text, broken after the word "makes." Only one line of text is transmitted to the server: the entire line with no embedded newline characters.

With wrap=physical, the text area contains two lines of text, broken after the word "makes." Two lines of text are sent to the server, separated by a newline character after the word "makes."