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

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