The <textarea> element is a multi-line text field — used whenever a response might reasonably span more than one line, unlike a single-line <input>.
Syntax
<textarea name="message" rows="5" cols="40"></textarea>Basic Example
<label for="message">Your Message</label>
<textarea id="message" name="message" rows="6" maxlength="500" placeholder="Tell us what you're looking for..."></textarea>Browser output: a resizable multi-line text box (most browsers add a drag handle in the corner by default), sized initially by rows.
How It Works
Unlike <input>, <textarea> is not a void element — its default value goes between the opening and closing tags, not in a value attribute.
Important Attributes
| Attribute | Purpose |
|---|---|
rows / cols | Initial visible size, in character rows/columns |
maxlength | Maximum character count |
placeholder | Hint text, same as on <input> |
Real-World Example
<label for="feedback">Course Feedback</label>
<textarea id="feedback" name="feedback" rows="4" maxlength="1000">Really enjoyed the live sessions!</textarea>Pre-filled default text sitting directly between the tags — this is exactly how a <textarea>'s default value works, unlike an <input>'s value attribute.
Comparison: input vs textarea
<input> | <textarea> | |
|---|---|---|
| Lines | Single line only | Multiple lines, user-resizable by default |
| Default value | value attribute | Content between the opening/closing tags |
| Use for | Names, emails, short codes | Messages, comments, descriptions |
Common Mistakes
- Writing default text as a
valueattribute (which<textarea>doesn't support) instead of between its tags - Using
<input type="text">for content that genuinely needs multiple lines, forcing everything into an awkward single line
Best Practices
- Use
<textarea>for any field where a multi-sentence response is genuinely expected - Set a sensible
maxlengthwhen a real limit exists on the backend
Accessibility Considerations
Same labeling rules as any other form field apply — a real, associated <label> is essential.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
The default resize handle can be controlled with CSS resize (none, vertical, horizontal, or both) if you need to constrain how users can reshape the field.
Mini Practice
- Build a feedback textarea with a
maxlengthof 300 and some pre-filled default text. - Restrict a textarea's resizing to vertical-only using CSS.
