📝 Phase 8 · Forms🟢 BeginnerMODULE 33
Textarea
Course progress93%
🎯 What you'll learn: The
<textarea> element for multi-line input, sizing it with rows/cols, controlling resize, and limiting length with maxlength.
Section 1
Basic Textarea
Unlike <input>, <textarea> is a paired tag — its default text goes between the opening and closing tags, not in a value attribute.
textarea-basic.html
HTML
<label for="msg">Your Message</label> <textarea id="msg" name="msg" rows="5" cols="40"></textarea>
⚠️
Don't put default text after cols like an attribute
Default content goes between <textarea> and </textarea> as plain text, never as a value="..." attribute — textarea simply doesn't support one.
Section 2
placeholder, maxlength & required
Just like text inputs, textareas support placeholder, maxlength, and required for basic validation and hinting.
textarea-attrs.html
HTML
<textarea name="feedback" rows="6" placeholder="Tell us what you think..." maxlength="500" required></textarea>
Section 3
Controlling Resize
By default, users can drag the bottom-right corner to resize a textarea. The CSS resize property controls this: resize: vertical, horizontal, both, or none.
textarea-resize.html
HTML
<!-- In CSS: --> textarea { resize: vertical; /* only allow up/down resize */ }
| Attribute | Purpose |
|---|---|
| rows | Visible height in text lines |
| cols | Visible width in characters |
| maxlength | Maximum number of characters accepted |
🧩 Knowledge Check — Lesson 33
5 questions to test your textarea knowledge.
1. Where does a textarea's default text go?
2. What does the rows attribute control?
3. Which CSS property controls whether a textarea can be resized by the user?
4. What does maxlength do on a textarea?
5. Which of these attributes does textarea share with regular text inputs?
Coding Challenge — Lesson 33
Apply what you learned · Beginner Level
Challenge: Build a Feedback Box
Build a labeled textarea named "feedback" with rows="6", a placeholder "Share your thoughts...", maxlength="300", and required.
Build a labeled textarea named "feedback" with rows="6", a placeholder "Share your thoughts...", maxlength="300", and required.
💡 Show hints if you're stuck
- Remember: no self-closing slash, and no default text needed since we're using placeholder.
Finished this lesson?
Mark it complete to track your progress.
Module 33 of 62Phase 8 — Forms