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:
rows— the visible height in lines of text (e.g.,rows="5"shows 5 lines)cols— the visible width in characters (e.g.,cols="40"shows about 40 characters wide)maxlength— the maximum number of characters allowedminlength— the minimum number of characters requiredplaceholder— hint text, same as with inputs
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>.
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.