Skip to: content, navigation

by Ian Lloyd

textarea (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Full Full Full Full

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>
Type
inline element
Contains
text content only, no markup allowed
Contained by
block-level elements, inline elements (except button)

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 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).

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

IE5.5Full
6.0Full
7.0Full
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Full
2.0Full
3.0Full
Opera9.2Full
9.5Full

It causes no compatibility issues, and has excellent support across all tested browsers.

In this Section

Related Reading

User-contributed notes

ID:
#1
Date:
Fri, 28 Mar 2008 12:14:05 GMT
Contributed by:
AutisticCuckoo

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.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters