| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
Description
A
textarea is similar to the text
input, but allows the person who’s filling in
the form to enter multiple lines of information, rather than a single
line, and thus is better for free-form text entry. However, unlike the
input element (in all its different types), the
textarea has an opening <textarea>
and closing </textarea> tag. It’s not possible to insert any
kind of markup inside the textarea—only text content is
allowed. However, when users complete the form, they may potentially enter
any characters, including accented characters, foreign characters, or
markup. As such, it’s important to state which kinds of content you’ll
allow the user to enter into the textarea, and it’s
even more important to effectively validate any content that’s entered in
to a textarea when it’s submitted. The example above
shows that, if no styles are applied via CSS, and br and div elements aren’t
used, the textarea lines up with the neighbouring
elements along its base, as Figure 1
shows.
The size of the textarea can be
changed in a couple of ways, should the default size be insufficient. The
simplest method involves the use of the cols
and rows attributes which, unsurprisingly,
define the number of horizontal input lines (rows) and the width of the
textarea in terms of columns. These are required
attributes and they can’t simply be dropped. However, browser support for
styling the textarea via CSS is excellent, so you can
override these attributes and let CSS do the heavy lifting (for example,
setting the width to 100% of the container—potentially a much more useful
method of sizing).
Not listed in the syntax section at the top but
worth a mention nonetheless is the IE-introduced (hence, non-standard)
wrap attribute. With values of
"soft", "hard" and
"off" (which is the default appearance in all
browsers), the aim is to stop text wrapping inside the textarea but also
define how wrapped text gets submitted to the server processing the form
("soft": text displayed with word wrapping and
submitted without carriage returns; "hard": text is
displayed with word wrapping and submitted with soft returns and line
feeds). As mentioned, this is a non-standard attribute and is better off
avoided, although if you do see it used, you’re most likely to see it used
as wrap=”off” rather than the attribute values just
detailed.
Example
This example shows a
very simple textarea to which no layout or formatting
is applied:
<form> <label for="perfectday">Describe your perfect day:</label> <textarea id="perfectday"></textarea> <input type="submit" value="Tell us"/> </form>
Use This For …
This element can be used to capture any data that may vary in size. For instance, it might be used to add a comment on a blog, enter biography information, write a review, or apply for a job. The possibilities for its use are almost endless!
Compatibility
| Internet Explorer | Firefox | Safari | Opera | Chrome | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 8.0 | 1.0 | 1.5 | 2.0 | 3.0 | 3.5 | 1.3 | 2.0 | 3.1 | 4.0 | 9.2 | 9.5 | 10.0 | 2.0 |
| Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full | Full |
It causes no compatibility issues, and has excellent support across all tested browsers.
In this Section
- accesskey
assigns a key to place focus on this form control - cols
sets the width of the textarea in characters - disabled
disables the textarea so that it can’t be used - name
specifies a name by which the textarea can be referenced - readonly
disables the textarea content so that it can’t be changed - rows
sets the number of rows (or lines) in the textarea - tabindex
indicates the order in the logical tabbing sequence for this control
