Learn how to use the <textarea> element for multi-line text input and understand when to choose it over standard single-line inputs.
What it is
The<textarea> element defines a multi-line plain-text editing control. Unlike other form elements, it does not have a value attribute in HTML; instead, the initial content is placed between the opening and closing tags. It is essential for fields where users need to enter paragraphs, comments, or code snippets. Related terms include "form controls," "input types," and "contenteditable" (though the latter is for rich text).
Why it matters
- User Experience: Allows natural entry of long-form text without horizontal scrolling.
- Data Integrity: Preserves line breaks and whitespace exactly as typed by the user.
- Flexibility: Can be resized by users (if enabled) or fixed via CSS for consistent layout.
- Simplicity: Requires no JavaScript for basic multi-line functionality.
Syntax or steps
To create a textarea, use the<textarea> tag with two key attributes: rows and cols. These define the visible size in characters. You can also add name for form submission and placeholder for hints. The default text goes inside the tags.
Example
<form action="/submit" method="post">
<label for="comments">Your Feedback:</label><br>
<textarea id="comments" name="user_comments" rows="4" cols="50" placeholder="Enter your thoughts here..."></textarea>
<br>
<button type="submit">Send</button>
</form><label>: Associates text with the input for accessibility.<textarea>: Defines the input area.rows="4"sets height to 4 lines;cols="50"sets width to 50 characters.placeholder: Shows hint text that disappears when typing starts.name: Identifies the field data when the form is submitted.
Common mistakes
- Using self-closing tags: Never write
<textarea />. Always close it explicitly:<textarea></textarea>. - Setting value via attribute: Do not use
value="text". Put initial text between the tags:<textarea>text</textarea>. - Ignoring accessibility: Failing to link a
<label>makes the form hard to navigate for screen readers. - Over-sizing: Setting huge
rowsorcolscan break mobile layouts. Use CSS for responsive sizing instead.
When to use it
Compare<textarea> with <input type="text"> to decide which fits your needs.
| Feature | <input type="text"> | <textarea> |
|---|---|---|
| Lines | Single line only | Multiple lines |
| Initial Value | Set via value attribute |
Set via inner text |
| Use Case | Names, emails, search queries | Comments, descriptions, messages |
| Resizing | No native resize handle | Native resize handle (CSS controllable) |
Practice
Guided Exercise: Create a form with a textarea labeled "Bio" that has 3 rows and 30 columns. Add a placeholder saying "Tell us about yourself."Challenge: Modify your previous exercise so the textarea cannot be resized by the user using CSS (
resize: none;).
Hint: For the challenge, add a style block or inline style:
style="resize: none;".
Quick check
Question: How do you set the default text inside a textarea?Answer: Place the text directly between the opening and closing
<textarea> tags. Do not use the value attribute.
Summary
The<textarea> element is the standard HTML solution for capturing multi-line user input. Remember that its content lives between the tags, not in an attribute, and always pair it with a label for accessible forms.