<textarea>

Defines a multi-line text input control

Definition and Usage

The <textarea> element establishes a multi-line text input control.

A text area can hold an unlimited number of characters, and the text renders in a fixed-width font (usually Courier).

The size of a text area is specified by the rows and cols attributes (or with CSS).

Tip: Always add the <label> tag for best accessibility practices.

Note: The name attribute is needed to reference the form data after the form is submitted.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

Attribute	Value	Description
name	text	Specifies a name for the text area
rows	number	Specifies the visible number of lines in a text area
cols	number	Specifies the visible width of a text area
placeholder	text	Specifies a short hint that describes the expected value
required	required	Specifies that the text area must be filled out
disabled	disabled	Specifies that the text area should be disabled
readonly	readonly	Specifies that the text area is read-only
maxlength	number	Specifies the maximum number of characters allowed
minlength	number	Specifies the minimum number of characters required
wrap	hard soft	Specifies how the text should be wrapped when submitted
autofocus	autofocus	Specifies that the text area should automatically get focus
autocomplete	on off	Specifies whether autocomplete is enabled
form	form_id	Specifies which form the text area belongs to
spellcheck	true false	Specifies whether to check spelling and grammar

The <textarea> tag also supports the Global Attributes in HTML.

The <textarea> tag also supports the Event Attributes in HTML.

Examples

Basic Textarea

Create a simple multi-line text area:

Example
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50">
Enter your message here...
</textarea>

Textarea with Placeholder

Use placeholder text to provide a hint:

Example
<label for="comment">Leave a comment:</label>
<textarea
  id="comment"
  name="comment"
  rows="5"
  cols="40"
  placeholder="Write your comment here..."
></textarea>

Textarea with Rows and Cols

Control the visible size with rows and cols attributes:

Example
<textarea name="description" rows="10" cols="60"></textarea>

Textarea with Maxlength Counter

Display a character counter with maxlength limit:

Example
<label for="bio">Bio (max 200 characters):</label>
<textarea id="bio" name="bio" rows="4" cols="50" maxlength="200"
          oninput="updateCounter()"></textarea>
<p>Characters remaining: <span id="counter">200</span></p>

<script>
  function updateCounter() {
    const textarea = document.getElementById('bio');
    const counter = document.getElementById('counter');
    const remaining = 200 - textarea.value.length;
    counter.textContent = remaining;
  }
</script>

Required Textarea Field

Make a textarea field required for form submission:

Example
<form>
  <label for="feedback">Feedback: *</label>
  <textarea id="feedback" name="feedback" rows="5" cols="40" required></textarea>
  <button type="submit">Submit</button>
</form>

Styled Textarea

Apply CSS styling to customize appearance:

Example
<style>
  .custom-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #745af2;
    border-radius: 8px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    resize: vertical;
    transition: border-color 0.3s;
  }

  .custom-textarea:focus {
    outline: none;
    border-color: #5a3fd8;
    box-shadow: 0 0 0 3px rgba(116, 90, 242, 0.1);
  }
</style>

<textarea class="custom-textarea" rows="5"
          placeholder="Enter your text..."></textarea>

Auto-Resize Textarea

Create a textarea that auto-resizes based on content:

Example

Approved-page light CSS-variable defaults are supplied: --border-color. The snippet includes CSS inside its HTML. The snippet includes JavaScript inside its HTML.

<style>
  .auto-resize {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 16px;
    resize: none;
    overflow: hidden;
  }
</style>

<textarea class="auto-resize"
          placeholder="Type here and watch me grow..."
          oninput="autoResize(this)"></textarea>

<script>
  function autoResize(textarea) {
    textarea.style.height = 'auto';
    textarea.style.height = textarea.scrollHeight + 'px';
  }
</script>

Try it Yourself

Interactive Example

Try typing in the textarea below:

Your Message:

Character count: 0

Try in Code Playground

Form Submission and Value

When a form is submitted, the textarea value is sent with the request. The name attribute is used as the key:

Example
<form action="/submit" method="post">
  <textarea name="userComment" rows="5" cols="40">
    This is the default text
  </textarea>
  <button type="submit">Submit</button>
</form>

<!-- When submitted, sends: userComment=This is the default text -->

Access the value with JavaScript:

Example
const textarea = document.querySelector("textarea");
const value = textarea.value; // Get current value
textarea.value = "New text"; // Set new value

Accessibility with Label

Always associate a <label> with your textarea for better accessibility:

Screen readers can announce the label when the textarea is focused
Clicking the label focuses the textarea
Improves usability for all users

Example - Explicit Label
<label for="comments">Additional Comments:</label>
<textarea id="comments" name="comments" rows="4" cols="50"></textarea>

Example - Implicit Label
<label>
  Your Feedback:
  <textarea name="feedback" rows="4" cols="50"></textarea>
</label>

Resizing Options

Control how users can resize the textarea using the CSS resize property:

Example
<style>
  /* Resize both horizontally and vertically (default) */
  .resize-both { resize: both; }

  /* Resize vertically only */
  .resize-vertical { resize: vertical; }

  /* Resize horizontally only */
  .resize-horizontal { resize: horizontal; }

  /* No resizing allowed */
  .resize-none { resize: none; }
</style>

<textarea class="resize-vertical" rows="4" cols="40">
  This textarea can only be resized vertically
</textarea>

Best Practices

Always use a <label> element with the for attribute for accessibility
Set appropriate rows and cols to give users a sense of expected content length
Use placeholder to provide hints, but never as a replacement for labels
Add maxlength when there's a character limit and show a counter
Use required for mandatory fields and provide clear error messages
Set resize: vertical in CSS to prevent horizontal resizing that breaks layouts
Use autocomplete appropriately for security and user experience
Consider using spellcheck="true" for user-generated content
Provide adequate padding and styling for better readability
Test with keyboard navigation and screen readers

Default CSS Settings

Most browsers will display the <textarea> element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

textarea {
  display: inline-block;
  font-family: monospace;
  resize: both;
  vertical-align: bottom;
  white-space: pre-wrap;
  word-wrap: break-word;
}

Related Tags

<input>
Defines an input control
<form>
Defines an HTML form
<label>
Defines a label for an input
<button>
Defines a clickable button
<fieldset>
Groups related elements in a form