Path // www.yourhtmlsource.com → Reference → <textarea>

<textarea>

by Ross Shannon

The <textarea> element creates a multi-line plain text editing control. Unlike the single-line <input type="text">, textarea allows users to enter multiple lines of text, making it ideal for comments, messages, descriptions, and other longer text content. The control can be resized by users in most browsers.

Clock This page was last updated on 2025-11-17


Syntax

<textarea name="fieldname" id="fieldname" rows="4" cols="50">
Default text goes here
</textarea>

The element requires both opening and closing tags. Any text between the tags becomes the initial value. Unlike other form controls, textarea does not use a value attribute - the content between tags is the value.

Attributes

  • name - The name used to identify the field data when the form is submitted
  • id - Unique identifier for associating with <label> elements
  • rows - The visible number of text lines (height)
  • cols - The visible width in average character widths
  • placeholder - Hint text displayed when the textarea is empty
  • required - Makes the field mandatory for form submission
  • disabled - Disables the textarea (cannot be edited or submitted)
  • readonly - Makes the field read-only (submitted but not editable)
  • maxlength - Maximum number of characters allowed
  • minlength - Minimum number of characters required
  • autofocus - Automatically focuses this field when page loads
  • autocomplete - Enable or disable browser autocomplete
  • wrap - How text wraps when submitted:
    • soft - Text wraps visually but submits without line breaks (default)
    • hard - Text wraps and submits with line breaks (requires cols)
    • off - No wrapping, horizontal scroll appears
  • spellcheck - Enable or disable spell checking ("true" or "false")
  • form - Associates textarea with a form by ID
  • aria-label - Accessible label when no visible label exists
  • aria-describedby - References element with additional description
  • aria-invalid - Indicates validation state
  • aria-required - Indicates field is required

Examples

Basic Comment Field

<label for="comment">Your Comment:</label>
<textarea id="comment" name="comment" rows="5" cols="40"
          placeholder="Share your thoughts..."
          required></textarea>

Character Limited Message

<label for="message">Message (max 500 characters):</label>
<textarea id="message" name="message"
          rows="6" cols="50"
          maxlength="500"
          aria-describedby="char-count"></textarea>
<small id="char-count">0/500 characters</small>

Pre-filled Bio Field

<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4" cols="60">Hello! I'm a web developer passionate about creating accessible and user-friendly websites.</textarea>

When to Use

Use the <textarea> element when:

  • Collecting multi-line text input (comments, messages, descriptions)
  • Users need to enter more than one line of text
  • The expected input is longer than what fits in a single-line field
  • Preserving line breaks in user input is important
  • Creating rich text editing interfaces (with JavaScript enhancement)

Accessibility and best practices:

  • Always pair with a <label> element using the for attribute
  • Set appropriate rows and cols for expected content length
  • Use placeholder as a hint, not as a replacement for labels
  • Add maxlength to prevent excessively long submissions
  • Use aria-describedby to link to character counters or help text
  • Consider minlength for requiring minimum content
  • Allow resizing unless there's a specific reason not to (CSS resize property)
  • Provide visual feedback for validation errors
  • Test keyboard accessibility (Tab to focus, typing should work immediately)
  • <form> - Container for form controls
  • <input> - Single-line text input (alternative)
  • <label> - Accessible labels for form controls
  • <fieldset> - Groups related form controls
  • <button> - Form submission button

CSS for controlling resize behavior:

textarea { resize: vertical; } /* Only vertical resize */
textarea { resize: none; } /* Disable resizing */
textarea { resize: both; } /* Allow both directions (default) */