HTML and CSS Reference
In-Depth Information
exactly as it appears in the document's markup. This element also allows an optional
placeholder
attribute to display instructions or hints about what content the user is expected to provide (placeholders
aren't submitted as form values; they're for display only). If the element has no initial text content and no
placeholder
attribute, the box will be blank when a browser renders it.
Some browsers render the text in a
textarea
in a monospace typeface—one in which every character is
the same width, such as Courier—but you can easily change the font with CSS if you prefer (and you'll see
how later in this chapter). Listing 8-19 shows a
textarea
element already filled with text as its initial value.
Listing 8-19
. A
textarea
element containing initial text
<textarea name="message" rows="8" cols="50">
Dear Power Outfitters,
I recently had to replace my trusty grappling gun after years of faithful service
(and I'm still kicking myself for leaving it in that cab, believe me). I ordered
the latest model, the Dreiberg 4000, from your website and it arrived the very next
day. Well I couldn't be more pleased! Not only is it smaller and lighter than my old
one, but it has twice the range and the new winching system is three times faster.
I'm scaling buildings like a teenaged sidekick again! I should have upgraded years ago.
Thanks!
</textarea>
You can see this box rendered with default styling in Figure 8-21. The scroll bar appears when the length
of the text exceeds the height of the box, and some browsers will automatically reserve some space for a
scroll bar along the box's right edge even when scrolling isn't necessary. This image is taken is from
Firefox for Windows.
Figure 8-21.
The
textarea
as seen in Firefox
Required Attributes
name
: Identifies the control so it can be associated with its value when the form is submitted. A
markup validator may not generate an error if this attribute is missing, but it's required in order to
successfully handle the form.
Optional Attributes
autofocus
: This Boolean attribute is new in HTML5 and indicates that the field should
automatically receive focus when the page loads.
