11.4: Textarea Control

The <textarea> tag is used when you need a larger input area than is provided by a textbox. This tag creates a multiline input box that displays horizontal and vertical scroll bars and word-wraps the text. A typical textarea control resembles the following.

Enter your comments:

 

Figure \(\PageIndex{1}\): A <textarea> control.

The <textarea> control is a container tag with the general format shown in Figure \(\PageIndex{1}\).

<textarea   id="id"   cols="n"   rows="n"   maxlength="n"   rows="n"   readonly="readonly"   disabled="disabled"   placeholder="short hint text"   autofocus="autofocus"   wrap="soft|hard" >   ...pre-entered text </textarea>

 

Figure \(\PageIndex{2}\): General format for <textarea> control.

The name Attribute

As with all form controls, the <textarea> should be assigned a name to identify the control. This name should be representative of the information contained in the field. The namevalue is used by server-side scripts when processing form data.

The id Attribute

As with all form controls, the <textarea> should be assigned an id. This id should be representative of the information contained in the field. The id is primarily used by client-side scripts when processing form data.

The cols Attribute

The visual width of the textarea is given by the cols attribute. It specifies the width as the approximate number of characters appearing across a line of text. If this attribute is not present, a default width of approximately 20 characters is used. A style sheet width property can be used in place of the cols attribute to set the width of the textarea.

The rows Attribute

The height of the textarea is given by the rows attribute. This value specifies the number of text lines that are visible in the input area. The default is two rows of visible text. A style sheet height property can be used in place of the rows attribute to set the height of the textarea.

The maxlength Attribute

As a general rule, you should not permit the user to enter more than the maximum number of expected characters. When capturing data for server processing, this maximum is often given by the field sizes in the database that stores the values.

You can set a maximum number of allowable characters by coding the maxlength attribute. When this value is coded, the user is not be able to type more than the specified number of characters into the field.

The disabled Attribute

The disabled attribute is used to disable and grays out the control so that the user can not interact with it. The disabled attribute is often associated with controls that are assigned default values using the value attribute. With the disabled attribute, users are not able to change or copy the default value.

The readonly Attribute

The readonly attribute is similar to the disabled attribute and is used to prevent the user from changing the value of the control. The readonly attribute is often associated with controls that are assigned default values using the value attribute. Unlike controls assigned the disabled attribute, the contents of a control with the readonly attribute can be copied.

The required attribute is new to HTML 5. It can be included with the text, url, email, and password text box controls. When the attribute is set to true, it specifies that the field must contain a value before submitting the form.

The placeholder Attribute

The placeholder attribute is new to HTML 5. It is used to specify a short hint that describes the expected value of an input field. The placeholder text is display in the text box until the user inputs a value.

The autofocus Attribute

The autofocus attribute specifies if the text box should receive focus automatically when the page loads.

The wrap Attribute

The wrap attribute configures line breaks within the information entered. When the wrap attribute is set to soft, the text input is not wrapped. When the attribute is set to hard, text in the textarea is wrapped when submitted.

Pre-filled Content

A textarea can be pre-filled with text. The information to display in the textarea is coded between the opening and closing <textarea>...<textarea> tags.

It is important to remember that any spaces, line breaks, or blank lines appearing in the editor coding are reproduced in the textarea, in much the same way that the browser displays information coded inside a <pre> tag. In the following example, editor coding in Figure \(\PageIndex{3}\) arranges the tag and its content on separate lines and indented for readability within the editor. Its browser display in Figure \(\PageIndex{4}\), however, is not as normal word-wrapped paragraphs; rather, the editor coding is faithfully reproduced.

<textarea id="MyTextarea" cols="50" rows="6">
  These are two paragraphs appearing 
  inside a textarea.

  This content, with line breaks and blank lines coded in the 
  editor For readability, Is exactly reproduced within the textarea.
    

Figure \(\PageIndex{3}\): Coding a textarea with hard-coded spaces and line breaks.

Figure \(\PageIndex{4}\): A textarea displaying hard-coded spaces and line breaks.

To permit pre-fill text to be automatically spaced and word-wrapped inside a textarea, the text should be coded immediately following the opening tag and followed immediately by the closing tag. No hard spaces or line breaks should be coded. The following example shows pre-entered paragraphs coded as single lines in the code editor to permit proper word wrapping in the textarea.

<textarea id="MyTextarea" cols="50" rows="6">
These are two word-wrapped paragraphs appearing in a textarea.

This content, without extra line breaks or blank lines coded in the editor, is properly word-wrapped inside the textarea as intended.
</textarea>
    

Figure \(\PageIndex{5}\): Coding a textarea for word-wrapped content.

Figure \(\PageIndex{6}\): A textarea displaying word-wrapped content.

HTML Tags and Quotes in a Textarea

HTML tags entered into a textarea do not have any formatting effects. They are treated as standard text characters. In the following illustration, HTML tags appear in a textarea, either as pre-filled text or as user data entry, but do not apply their formatting.

<textarea id="TagInput" cols="40" rows="6">
The <p> tag appears around a block of
text to offset it from surrounding
text by blank lines. A <div> tag, in
contrast, does not produce blank lines
surrounding its content.
</textarea>
    

Figure \(\PageIndex{7}\): Coding a textarea with HTML tags.

Figure \(\PageIndex{8}\): A textarea with HTML tags.

Unlike the case with textbox values, quotation marks can appear within pre-filled text and can also be entered by the user without causing textarea display or data-entry problems.

Styling a Textarea

A textarea uses a default Courier New font face with 12-point type. You can change this setting as well as style the textarea using a style sheet as shown below.

<style type="text/css">
  textarea {style="border:inset 5px; background-color:#F0F0F0; color:#0000FF;
            font-family:comic sans ms; font-size:10pt; padding:7px}
</style>

<textarea id="Comments" cols="50" rows="4">
This control is styled with 10-point Comic Sans
MS type face with gray background and blue
foreground colors.

The border is inset style, five pixels in width.
Padding of 7 pixels appears around the text.
</textarea>
    

Figure \(\PageIndex{9}\): Coding to style a textarea.

Figure \(\PageIndex{9}\): A styled textarea.