Textarea Input 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 10-11. A <textarea> control.
The <textarea> control is a container tag with the general format shown in Figure 10-12.
<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 10-12. 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 Listing
10-8 arranges the tag and its content on separate lines and indented for readability within the
editor. Its browser display in Figure 10-13, 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.
Listing 10-8. Coding a textarea with hard-coded spaces and line breaks.
Figure 10-13. 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>
Listing 10-9. Coding a textarea for word-wrapped content.
Figure 10-14. 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>
Listing 10-10. Coding a textarea with HTML tags.
Figure 10-15. 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>
Listing 10-11. Coding to style a textarea.
Figure 10-16. A styled textarea.