Learn the Front-end Beta Search

<textarea>

Draft

Definition

The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, such as a comment on a review or feedback form. Unlike the <input> element, <textarea> can contain multiple lines of text and is ideal for longer content like descriptions, messages, or code snippets.

Syntax

<textarea name="field-name" id="field-id" rows="4" cols="50">
Default text content
</textarea>

Attributes

Essential Attributes

<textarea name="fieldName" <!-- name for form submission -->
  id="fieldId"            <!-- Unique identifier -->
  rows="4"                <!-- Number of visible text lines -->
  cols="50"               <!-- Number of visible characters per line -->
  placeholder="Hint text" <!-- Placeholder text -->
  required                <!-- Required field validation -->
  disabled                <!-- Disable the textarea -->
  readonly                <!-- Read-only textarea -->
  maxlength="500"         <!-- Maximum character length -->
  minlength="10"          <!-- Minimum character length -->
  wrap="soft"             <!-- Text wrapping behavior -->
  autocomplete="on"       <!-- Autocomplete behavior -->
  autofocus>              <!-- Auto-focus on page load -->
  Default content
</textarea>

Advanced Attributes

<textarea
  spellcheck="true"       <!-- Enable/disable spell checking -->
  dir="ltr"               <!-- Text direction (ltr, rtl, auto) -->
  form="form-id"          <!-- Associate with specific form -->
  tabindex="0"            <!-- Tab order -->
  aria-label="Description" <!-- Screen reader label -->
  aria-describedby="help" <!-- Reference to help text -->
  data-*="value">         <!-- Custom data attributes -->
  Content
</textarea>

Examples

Basic Textarea Usage

HTML

Basic Textarea Usage:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Basic Textarea Usage:</h3>

  <div class="space-y-4">
    <div>
      <label for="basic-textarea" class="block text-sm font-medium text-gray-700 mb-2">Simple Textarea:</label>
      <textarea id="basic-textarea" name="basicText" rows="4" cols="50"
                placeholder="Enter your text here..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </textarea>
    </div>

    <div>
      <label for="default-textarea" class="block text-sm font-medium text-gray-700 mb-2">Textarea with Default Content:</label>
      <textarea id="default-textarea" name="defaultText" rows="4"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">

This is some default text that appears when the textarea loads.
You can edit this content or replace it entirely.
</textarea>
</div>

  </div>
</div>

Textarea Sizes and Dimensions

HTML

Textarea Sizes and Dimensions:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Textarea Sizes and Dimensions:</h3>

  <div class="space-y-4">
    <div>
      <label for="small-textarea" class="block text-sm font-medium text-gray-700 mb-2">Small Textarea (2 rows):</label>
      <textarea id="small-textarea" name="smallText" rows="2"
                placeholder="Short comment..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </textarea>
    </div>

    <div>
      <label for="medium-textarea" class="block text-sm font-medium text-gray-700 mb-2">Medium Textarea (6 rows):</label>
      <textarea id="medium-textarea" name="mediumText" rows="6"
                placeholder="Longer description..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </textarea>
    </div>

    <div>
      <label for="large-textarea" class="block text-sm font-medium text-gray-700 mb-2">Large Textarea (10 rows):</label>
      <textarea id="large-textarea" name="largeText" rows="10"
                placeholder="Extended content..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </textarea>
    </div>

    <div>
      <label for="responsive-textarea" class="block text-sm font-medium text-gray-700 mb-2">Responsive Textarea:</label>
      <textarea id="responsive-textarea" name="responsiveText"
                class="w-full h-20 md:h-32 lg:h-40 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
                placeholder="This textarea adjusts height based on screen size...">
      </textarea>
    </div>

  </div>
</div>

Textarea with Validation

HTML

Textarea with Validation:

Characters: 0/200

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Textarea with Validation:</h3>

  <div class="space-y-4">
    <div>
      <label for="required-textarea" class="block text-sm font-medium text-gray-700 mb-2">
        Required Textarea <span class="text-red-500">*</span>
      </label>
      <textarea id="required-textarea" name="requiredText" rows="4" required
                placeholder="This field is required..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </textarea>
    </div>

    <div>
      <label for="length-textarea" class="block text-sm font-medium text-gray-700 mb-2">
        Length Validation (10-200 characters)
      </label>
      <textarea id="length-textarea" name="lengthText" rows="4"
                minlength="10" maxlength="200" required
                placeholder="Enter between 10 and 200 characters..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </textarea>
      <p class="text-xs text-gray-500 mt-1">Characters: <span id="char-count">0</span>/200</p>
    </div>

    <div>
      <label for="pattern-textarea" class="block text-sm font-medium text-gray-700 mb-2">
        Pattern Validation (alphanumeric only)
      </label>
      <textarea id="pattern-textarea" name="patternText" rows="4"
                pattern="[A-Za-z0-9\s]+" title="Only letters, numbers, and spaces allowed"
                placeholder="Only letters, numbers, and spaces..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </textarea>
    </div>

  </div>
</div>

Textarea States and Styling

HTML

Textarea States and Styling:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Textarea States and Styling:</h3>

  <div class="space-y-4">
    <div>
      <label for="normal-textarea" class="block text-sm font-medium text-gray-700 mb-2">Normal State:</label>
      <textarea id="normal-textarea" name="normalText" rows="3"
                placeholder="Normal textarea..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
      </textarea>
    </div>

    <div>
      <label for="focused-textarea" class="block text-sm font-medium text-gray-700 mb-2">Focused State:</label>
      <textarea id="focused-textarea" name="focusedText" rows="3"
                placeholder="Click to focus..."
                class="w-full px-3 py-2 border-2 border-blue-500 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 ring-2 ring-blue-200">
      </textarea>
    </div>

    <div>
      <label for="disabled-textarea" class="block text-sm font-medium text-gray-700 mb-2">Disabled State:</label>
      <textarea id="disabled-textarea" name="disabledText" rows="3" disabled
                placeholder="This textarea is disabled"
                class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-100 text-gray-500 cursor-not-allowed">
      </textarea>
    </div>

    <div>
      <label for="readonly-textarea" class="block text-sm font-medium text-gray-700 mb-2">Read-only State:</label>
      <textarea id="readonly-textarea" name="readonlyText" rows="3" readonly
                class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-700">

This textarea is read-only. Users can see the content but cannot modify it.
</textarea>
</div>

  </div>
</div>

Textarea in Forms

HTML

Textarea in Forms:

Contact Form:

Feedback Form:

Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Textarea in Forms:</h3>

  <div class="space-y-6">
    <div class="bg-white p-4 border rounded">
      <h4 class="font-semibold mb-3">Contact Form:</h4>
      <form class="space-y-4">
        <div>
          <label for="contact-name" class="block text-sm font-medium text-gray-700 mb-1">Name:</label>
          <input type="text" id="contact-name" name="contactName" required
                 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <div>
          <label for="contact-email" class="block text-sm font-medium text-gray-700 mb-1">Email:</label>
          <input type="email" id="contact-email" name="contactEmail" required
                 class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>

        <div>
          <label for="contact-message" class="block text-sm font-medium text-gray-700 mb-1">Message:</label>
          <textarea id="contact-message" name="contactMessage" rows="5" required
                    placeholder="Please enter your message..."
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none">
          </textarea>
        </div>

        <button type="submit" class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors">
          Send Message
        </button>
      </form>
    </div>

    <div class="bg-white p-4 border rounded">
      <h4 class="font-semibold mb-3">Feedback Form:</h4>
      <form class="space-y-4">
        <div>
          <label for="feedback-rating" class="block text-sm font-medium text-gray-700 mb-1">Rating:</label>
          <select id="feedback-rating" name="feedbackRating"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            <option value="">Select rating</option>
            <option value="5">5 - Excellent</option>
            <option value="4">4 - Very Good</option>
            <option value="3">3 - Good</option>
            <option value="2">2 - Fair</option>
            <option value="1">1 - Poor</option>
          </select>
        </div>

        <div>
          <label for="feedback-comment" class="block text-sm font-medium text-gray-700 mb-1">Comments:</label>
          <textarea id="feedback-comment" name="feedbackComment" rows="4"
                    placeholder="Please share your experience..."
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none">
          </textarea>
        </div>

        <button type="submit" class="w-full bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition-colors">
          Submit Feedback
        </button>
      </form>
    </div>

  </div>
</div>

Advanced Textarea Features

HTML

Advanced Textarea Features:

Preview: Rich text formatting will appear here
Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Advanced Textarea Features:</h3>

  <div class="space-y-4">
    <div>
      <label for="resizable-textarea" class="block text-sm font-medium text-gray-700 mb-2">Resizable Textarea:</label>
      <textarea id="resizable-textarea" name="resizableText" rows="4"
                placeholder="Drag the corner to resize..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize">
      </textarea>
    </div>

    <div>
      <label for="auto-resize-textarea" class="block text-sm font-medium text-gray-700 mb-2">Auto-resize Textarea:</label>
      <textarea id="auto-resize-textarea" name="autoResizeText"
                placeholder="This textarea grows with content..."
                class="w-full min-h-[100px] px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none overflow-hidden">
      </textarea>
    </div>

    <div>
      <label for="code-textarea" class="block text-sm font-medium text-gray-700 mb-2">Code Input:</label>
      <textarea id="code-textarea" name="codeText" rows="8"
                placeholder="Enter your code here..."
                spellcheck="false"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm bg-gray-50 resize-none">

function example() {
console.log("Hello, World!");
return true;
}
</textarea>
</div>

    <div>
      <label for="rich-textarea" class="block text-sm font-medium text-gray-700 mb-2">Rich Text Preview:</label>
      <textarea id="rich-textarea" name="richText" rows="6"
                placeholder="Type markdown or HTML..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none">

# Heading 1

This is **bold text** and _italic text_.

- List item 1
- List item 2
</textarea>
<div class="mt-2 p-3 bg-gray-50 border rounded text-sm">
<strong>Preview:</strong> <span class="text-gray-600">Rich text formatting will appear here</span>
</div>
</div>
  </div>
</div>

Textarea with Character Counter

HTML

Textarea with Character Counter:

Characters: 0/500 Words: 0
Characters remaining: 280
Code
<div class="bg-gray-100 p-6 border rounded">
  <h3 class="font-semibold mb-4">Textarea with Character Counter:</h3>

  <div class="space-y-4">
    <div>
      <label for="counter-textarea" class="block text-sm font-medium text-gray-700 mb-2">
        Character Counter (Max 500)
      </label>
      <textarea id="counter-textarea" name="counterText" rows="5" maxlength="500"
                placeholder="Start typing to see character count..."
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none">
      </textarea>
      <div class="flex justify-between items-center mt-2">
        <span class="text-xs text-gray-500">Characters: <span id="char-counter">0</span>/500</span>
        <span class="text-xs text-gray-500">Words: <span id="word-counter">0</span></span>
      </div>
    </div>

    <div>
      <label for="tweet-textarea" class="block text-sm font-medium text-gray-700 mb-2">
        Tweet Composer (Max 280 characters)
      </label>
      <textarea id="tweet-textarea" name="tweetText" rows="3" maxlength="280"
                placeholder="What's happening?"
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none">
      </textarea>
      <div class="flex justify-between items-center mt-2">
        <span class="text-xs text-gray-500">Characters remaining: <span id="tweet-counter">280</span></span>
        <button class="px-4 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600 transition-colors">
          Tweet
        </button>
      </div>
    </div>

  </div>
</div>

Browser Support

The <textarea> element is supported in all browsers and has been a standard HTML element since HTML 2.0.

Best Practices

  1. Always use labels: Provide clear, descriptive labels for all textareas
  2. Appropriate sizing: Use rows and cols attributes for initial sizing, but allow CSS to control final appearance
  3. Validation: Implement client-side validation with appropriate attributes
  4. Accessibility: Use aria-label and aria-describedby for screen readers
  5. Placeholder text: Provide helpful placeholder text that explains expected input
  6. Character limits: Use maxlength for very long content to prevent abuse
  7. Resize control: Consider using resize CSS property to control user resizing behavior

Common Use Cases

  • Contact forms: Message fields and comment sections
  • Feedback systems: User reviews and ratings
  • Content creation: Blog posts, articles, and descriptions
  • Code input: Programming interfaces and code editors
  • Data entry: Long-form data input and editing
  • Social media: Post composition and status updates
  • Documentation: Notes, descriptions, and explanations
  • <input>: Single-line text input
  • <label>: Form field labels
  • <form>: Form container
  • <fieldset>: Grouping related form controls
  • <legend>: Fieldset caption
  • <button>: Form submission and actions
  • <select>: Dropdown selection controls