textarea (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<textarea cols="number" name="string" rows="number">
</textarea>

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.

Figure 1. A simple, unformatted textarea A simple unformatted textarea

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

User-contributed notes

Related Products