← Back to Chapters

HTML textarea Element

? HTML <textarea> Element

⚡ Quick Overview

The <textarea> element creates a multi-line text input field. It is commonly used in forms to collect feedback, messages, or any longer user input. Unlike single-line text inputs, a textarea gives users more space to type and edit their content. You can control its size, behavior, and constraints with various attributes and CSS.

A well-configured textarea improves usability and accessibility by providing labels, helpful hints, validation, and optional extras like spell checking or character counters.

? Key Concepts

  • Multi-line input: Textareas are designed for longer, multi-line text (comments, messages, descriptions).
  • Form integration: The name attribute is required for the value to be sent during form submission.
  • Size control: rows and cols control the visible size, but CSS is preferred for precise layout.
  • Usability: placeholder, maxlength, and minlength guide user input.
  • Behavior flags: Attributes like readonly, disabled, and required control how users interact.
  • Text wrapping: wrap="soft" or wrap="hard" determine how line breaks are sent to the server.
  • Accessibility: Proper label, id, and aria-describedby help screen reader users.

? Syntax & Important Attributes

? View Basic Syntax 
<label for="message">Your message:</label>
<textarea
  id="message"
  name="message"
  rows="5"
  cols="40"
  placeholder="Type your message here..."
  maxlength="500"
  minlength="10"
  required
></textarea>

Common attributes:

  • name: Key used during form submission. Without it, the value is not sent.
  • rows / cols: Visible height (lines) and width (characters). Often replaced by CSS width/height.
  • placeholder: Hint text when empty. It does not replace a proper label.
  • maxlength / minlength: Limits on the number of characters typed.
  • readonly: Content can be selected but not edited.
  • disabled: Completely inactive and excluded from form submission.
  • wrap: soft (no extra line breaks in submitted value) or hard (inserts line breaks).
  • required: Prevents empty form submission.
  • autofocus: Gives focus to the field when the page loads.
  • spellcheck: Enables or disables spell checking (for example, spellcheck="true").
  • autocomplete: Hints if the browser should suggest previous values.
  • enterkeyhint: Suggests the action label on mobile keyboards (for example, send).

? Code Example: Comment Form

? View Code Example 
<form action="#" onsubmit="alert('Form submitted!'); return false;">
  <label for="comments">Your Comments:</label>
  <textarea
    id="comments"             <!-- Links label -->
    name="comments"           <!-- Required for submission -->
    rows="6" cols="50"
    placeholder="Write your comments here..."
    maxlength="500" minlength="10"
    wrap="soft" required
    spellcheck="true" autocomplete="on"
    aria-describedby="comments-help comments-counter"
  ></textarea>
  <small id="comments-help">At least 10 characters.
  No personal info, please.</small>
  <br><br>
  <button type="submit">Submit</button>
</form>

? Live Output / Explanation

?️ Interactive Comment Box

This live demo shows a textarea with validation rules and a character counter. Try typing into the box and watch the counter update as you approach the maximum length.

At least 10 characters. Keep it constructive. 0 / 500

? Tips & Best Practices

  • Always include a matching label and id, and optionally use aria-describedby for help text or counters.
  • Use CSS for sizing (e.g., min-height, width: 100%) and allow vertical resizing with resize: vertical; for better UX.
  • Keep name set; without it, the textarea value is not included in form submission.
  • Use placeholder only as a hint, never as the only label — placeholders disappear when the user types.
  • Prefer wrap="soft" unless your backend specifically expects hard-wrapped lines.
  • Provide both maxlength and minlength when collecting user-generated content, and still validate on the server.
  • Enable spellcheck for comment-like fields, but disable it (spellcheck="false") for code or configuration textareas.
  • Avoid disabling resize completely (resize: none) unless you have a strong layout reason; users often need to expand the box.

? Try It Yourself

  • Add a second textarea for code snippets with spellcheck="false" and apply a monospace font via CSS (for example, font-family: monospace;).
  • Change wrap to hard, submit the form, and inspect how line breaks are included in the submitted value on the server.
  • Implement a live character counter that turns red when the user types more than 480 characters (listen to the input event).
  • Store the textarea draft in localStorage on each input, and restore it when the page loads so users don’t lose their text.

? Summary

  • The <textarea> element is used for multi-line user input such as comments and messages.
  • Attributes like name, rows, cols, placeholder, and maxlength control behavior and usability.
  • Accessibility improves when you pair textareas with labels, hints, and ARIA attributes.
  • Use CSS for layout and resizing, while attributes handle semantics and validation.
  • Thoughtful configuration (wrap mode, spellcheck, limits, counters) leads to a smoother user experience and cleaner data.