HTML textarea: multi‑line text that stays readable
The <textarea> control accepts multi‑line text—perfect for messages, addresses, bios, and notes. Unlike single‑line inputs, a textarea preserves line breaks and is resizable in most browsers, giving users room to think and edit. With a clear label and sensible constraints, it becomes a comfortable writing surface that works across devices.
Make space and set expectations
Provide enough vertical room to avoid cramped text. While the rows attribute controls initial height, prefer CSS for layout and allow user resizing. Add a helpful placeholder or helper text to set tone and length expectations (“A short bio, 2–3 sentences”). Use maxlength to protect databases from overly long submissions, but keep limits generous so users can express themselves.
Accessibility
- Always include a visible label connected via
for/id. - Associate helper and error text using
aria-describedby. - Preserve a visible focus outline and a readable font size.
Validation
Use minlength/maxlength and optional pattern for structured content. Validate on blur or submit; avoid fighting the user while they type. On the server, trim spaces, normalize line endings, and sanitize to prevent injection.
Copy‑ready patterns
- Message: label + 4–6 rows + helpful placeholder +
required. - Address: label + 3–5 rows + example format; store each line if needed.
- Bio: label + friendly helper text +
maxlength(e.g., 280).
Performance & UX
Keep typing snappy. Defer heavy logic, and avoid layout shifts by reserving space for validation hints. If you mirror the text elsewhere (e.g., preview), throttle updates to avoid jank on long input.
With enough space, helpful guidance, and light validation, the humble <textarea> becomes a delight to use—capturing rich feedback without custom widgets.