Textarea and Other Form Elements
Learn about <textarea> for multi-line text, button types, fieldset/legend for grouping, and lesser-known elements like <output>, <meter>, and <progress>.
The <textarea> element — multi-line text input
When a single-line <input type="text"> isn't enough — like writing a message, a bio, a review, or a comment — you need <textarea>. This element creates a multi-line, resizable text area where users can type paragraphs of text.
Unlike <input>, the <textarea> element is not self-closing. It has both an opening and closing tag, and any text placed between them becomes the default content:<textarea name="message">Default text here</textarea>
Key attributes:<ul><li>rows — the visible height in lines of text (e.g., rows="5" shows 5 lines)</li><li>cols — the visible width in characters (e.g., cols="40" shows about 40 characters wide)</li><li>maxlength — the maximum number of characters allowed</li><li>minlength — the minimum number of characters required</li><li>placeholder — hint text, same as with inputs</li></ul>
Most modern websites style textareas with CSS width and height instead of rows/cols, but the attributes still work and are useful for quick prototyping.
Real-world examples: Twitter's (X's) compose box is a textarea with maxlength="280". Amazon product reviews, YouTube comments, GitHub issue descriptions — all textareas. Any time you see a large text box on a website, it's a <textarea>.
A very common mistake: trying to set a textarea's default value using a value attribute like an input. Textareas don't use the value attribute — the default text goes between the opening and closing tags. Also, any whitespace (including indentation) between the tags counts as content. Write <textarea></textarea> with no space between the tags if you want it empty.