textarea: The Textarea element

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, for example a comment on a review or feedback form.

Attributes

Specific attributes

Recommended attributes

name="[field name]" specifies the name of the textarea control, which is submitted with the form data.

Allowed attributes

cols="[number]" specifies the visible width of the text control, in average character widths.

disabled prevents user interaction with the textarea.

form="[form id]" associates the textarea with a form element.

maxlength="[number]" specifies the maximum number of characters allowed.

minlength="[number]" specifies the minimum number of characters required.

placeholder="[placeholder text]" provides a hint about the expected input.

readonly makes the textarea non-editable but still submittable.

required indicates that the textarea must be filled before submitting.

rows="[number]" specifies the number of visible text lines for the control.

wrap="[wrap type]" specifies how text wraps. Values are:

• soft: Text wraps visually but line breaks are not inserted (default)
• hard: Line breaks are inserted to match the visual wrapping

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<form action="/blog-post" method="post">
  <h2>Write a Blog Post</h2>
  
  <label for="title">Post Title:</label>
  <input type="text" id="title" name="title" required>
  
  <label for="content">Post Content:</label>
  <textarea id="content" name="content" rows="15" cols="80" required 
            placeholder="Write your blog post here. Share your thoughts about the IndieWeb, personal websites, or web technologies...">
  </textarea>
  
  <label for="excerpt">Excerpt (optional):</label>
  <textarea id="excerpt" name="excerpt" rows="3" cols="80" maxlength="300" 
            placeholder="Brief summary of your post for RSS feeds and social sharing...">
  </textarea>
  
  <label for="tags">Tags:</label>
  <textarea id="tags" name="tags" rows="2" cols="80" 
            placeholder="indieweb, personal-website, blogging, web-standards">
  </textarea>
  
  <button type="submit">Publish Post</button>
</form>

<form action="/contact" method="post">
  <h2>Get in Touch</h2>
  
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <label for="website">Your Website:</label>
  <input type="url" id="website" name="website" placeholder="https://your-domain.com">
  
  <label for="message">Message:</label>
  <textarea id="message" name="message" rows="8" cols="60" required minlength="10" 
            placeholder="Tell us about your project, ask a question, or just say hello...">
  </textarea>
  
  <label for="reason">Reason for Contact:</label>
  <textarea id="reason" name="reason" rows="3" cols="60" 
            placeholder="Collaboration, question about IndieWeb, website review, etc.">
  </textarea>
  
  <button type="submit">Send Message</button>
</form>