textarea (HTML element)
| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ |
|---|---|---|---|
| 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
old-fashioned 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. This is a slightly clumsy and simplistic way of controlling the
element’s size, but 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—a much more useful method of sizing).
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 | |||||||
|---|---|---|---|---|---|---|---|---|---|---|
| 5.5 | 6.0 | 7.0 | 1.0 | 1.5 | 2.0 | 1.3 | 2.0 | 3.0 | 9.2 | 9.5 |
| 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 controlcols
sets the width of thetextareain charactersdisabled
disables thetextareaso that it can’t be usedname
specifies a name by which thetextareacan be referencedreadonly
disables thetextareacontent so that it can’t be changedrows
sets the number of rows (or lines) in thetextareatabindex
indicates the order in the logical tabbing sequence for this control
User-contributed notes
- ID:
- #1
- Date:
- Fri, 28 Mar 2008 12:14:05 GMT
Using ROWS and COLS may be 'old-fashioned', but they are important in order to ensure a reasonable presentation in non-CSS browsers. That's why those two attributes are required.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.