Multiline Text Areas (HTML & XHTML: The Definitive Guide, 4th Edition)

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:

Create a multiline text input area

Attributes:

ACCESSKEY
ONKEYPRESS

CLASS
ONKEYUP

COLS
ONMOUSEDOWN

DIR
ONMOUSEMOVE

DISABLED
ONMOUSEOUT

ID
ONMOUSEOVER

LANG
ONMOUSEUP

NAME
ONSELECT

ONBLUR
READONLY

ONCHANGE
ROWS

ONCLICK
STYLE

ONDBLCLICK
TABINDEX

ONFOCUS
TITLE

ONKEYDOWN
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. That default text must be plain text -- 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 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.

9.7.1.2. 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 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 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 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 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."

9.7. Multiline Text Areas

9.7.1. The <textarea> Tag

<textarea>

9.7.1.1. The rows and cols attributes

9.7.1.2. The wrap attribute