<textarea> Text area
A multi-line field for longer input such as messages.
<textarea> is a text field with several lines, used for comments, messages and the like. Default text goes between the tags. There is no value attribute for it.
Size it with rows and cols, or with CSS. maxlength caps the length and required makes it mandatory. Watch out for spaces or line breaks between the tags: they count as real content, and the placeholder will not show.
rows, cols, wrap and maxlength are covered in the textarea element definition (opens in a new tab). Practise in the Textarea, Select, Radio, Checkbox lesson.
Syntax
<label for="id">Label</label>
<textarea id="id" name="name" rows="4"></textarea>When to use it
Contact messages, product reviews, delivery notes and bios can all run past one line, so they go in a <textarea>. The size of the box tells people how much you expect. Three rows invite a sentence or two. Ten rows invite a story.
One-line answers like a name or a subject belong in an input. Enter submits the form from an input and starts a new line in a textarea, and people count on that difference. Bold text and links are beyond a textarea; for those you need a rich text editor or a lightweight markup language such as Markdown.
Length limits have a catch. On submit, every line break travels as two characters, a carriage return plus a line feed. So a message that fits maxlength="500" in the browser can reach the server with more than 500 characters. Leave some slack in the server-side check instead of rejecting the text.
Attributes
| Attribute | What it does |
|---|---|
name | Name sent with the text. |
rows | Visible number of lines. |
cols | Visible width in characters. |
placeholder | Hint shown when empty. |
required | Must be filled in. |
minlength | Minimum number of characters. |
maxlength | Maximum number of characters. |
readonly | Text cannot be edited. |
disabled | Disables the control. |
wrap | hard or soft: how line wrapping is sent. |
Live example
Edit the code and watch the preview.
<label for="msg">Your message</label>
<textarea id="msg" name="message" rows="4" cols="40" maxlength="500" placeholder="Write here"></textarea>More examples
Review with a minimum and maximum
Reviews here need 20 to 300 characters. A hint linked with aria-describedby states the limits, and the browser refuses to submit anything shorter. Try posting a two-word review.
<form>
<label for="review">Your review</label>
<textarea id="review" name="review" rows="5" cols="40" minlength="20" maxlength="300" aria-describedby="review-hint" required></textarea>
<p id="review-hint">Between 20 and 300 characters.</p>
<button>Post review</button>
</form>Prefilled and read-only text
The saved bio sits between the tags of the first textarea, ready for editing. The second textarea is readonly. You can select and copy the embed code, but you cannot change it. A disabled field would be left out on submit; this one is sent.
<form>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="3" cols="40">I bake bread on weekends and teach maths during the week.</textarea>
<label for="embed">Embed code</label>
<textarea id="embed" name="embed" rows="2" cols="40" readonly><iframe src="https://example.com/widget"></iframe></textarea>
<button>Save profile</button>
</form>Tip: For an empty textarea, put the closing tag straight after the opening one.
Browser support
textarea works in every browser and is in the HTML Living Standard. Most desktop browsers add a resize handle, and the CSS resize property controls it. Newer CSS, field-sizing:content, makes the box grow with its text, but some browsers still lack it (see field-sizing support (opens in a new tab)).
Accessibility
Give the textarea a visible label. If you set maxlength, state the limit in text too, ideally with a live character count. How to describe limits is covered in the W3C tutorial on form instructions (opens in a new tab).
Common mistakes
Wrong
<textarea value="Hello"></textarea>Right
<textarea name="msg">Hello</textarea>There is no value attribute on textarea. Default text sits between the tags.
Wrong
<textarea name="msg" />Right
<textarea name="msg"></textarea>textarea needs an end tag. Leave it off and the rest of the page turns into its content.
Frequently asked questions
How do I set a default value for a textarea?
Write it between the tags: <textarea name="bio">Default text</textarea>. In HTML a textarea has no value attribute; only JavaScript uses the value property. Any whitespace or line breaks between the tags become part of the default value, so watch for them. Drafting longer body content to paste in? An online HTML5 editor (opens in a new tab) lets you compose it with rich text and source kept in sync.
How do I stop users resizing a textarea?
With the CSS resize property. textarea{resize:vertical} allows height changes only, and resize:none turns resizing off completely. Vertical resizing is usually the best setting, since people with large text or long answers need the extra room. In browsers that support it, the newer field-sizing:content property makes the box grow by itself.
Practise it
- Textarea, Select, Radio, Checkbox (Module 6: Forms)
- Contact Page with Form (Module 10: Final Projects)