<textarea> - The Text Area Element

The `<textarea>` Element

Form Control HTML 2.0

The textarea element creates a multi-line text input control, perfect for comments, messages, descriptions, and any content that requires multiple lines.

Quick Example

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

<button type="submit">Send</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

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

<button type="submit">Send</button>
</form>

Syntax

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

Unlike <input>, the textarea requires a closing tag. Any text between the tags becomes the default value.

Attributes

Core Attributes

Attribute	Description	Example
`name`	Name for form data	`name="comment"`
`rows`	Visible number of text rows	`rows="5"`
`cols`	Visible width in characters	`cols="40"`
`placeholder`	Hint text when empty	`placeholder="Enter text..."`
`required`	Makes field mandatory	`required`
`disabled`	Disables the textarea	`disabled`
`readonly`	Makes textarea read-only	`readonly`
`autofocus`	Auto-focus on page load	`autofocus`

Validation Attributes

Attribute	Description	Example
`minlength`	Minimum character count	`minlength="10"`
`maxlength`	Maximum character count	`maxlength="500"`

Other Attributes

Attribute	Description	Values
`autocomplete`	Enable/disable autocomplete	`on`, `off`
`wrap`	How text wraps when submitted	`soft`, `hard`
`spellcheck`	Enable spell checking	`true`, `false`
`form`	Associates with form by ID	Form element ID
`dirname`	Submit text directionality	Field name for direction

Common Use Cases

Basic Textarea

<form>
<label for="bio">Biography:</label>
<textarea id="bio" name="bio" rows="5" cols="50"
          placeholder="Tell us about yourself..."></textarea>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="bio">Biography:</label>
<textarea id="bio" name="bio" rows="5" cols="50"
          placeholder="Tell us about yourself..."></textarea>
</form>

Textarea with Character Limit

<form>
<label for="tweet">Tweet (max 280 characters):</label>
<textarea id="tweet" name="tweet" rows="3"
          maxlength="280" placeholder="What's happening?"></textarea>
<small>Characters remaining: <span id="remaining">280</span></small>
</form>

<script>
const tweet = document.getElementById('tweet');
const remaining = document.getElementById('remaining');

tweet.addEventListener('input', () => {
  const left = 280 - tweet.value.length;
  remaining.textContent = left;
  remaining.style.color = left < 20 ? 'red' : 'inherit';
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="tweet">Tweet (max 280 characters):</label>
<textarea id="tweet" name="tweet" rows="3"
          maxlength="280" placeholder="What's happening?"></textarea>
<small>Characters remaining: <span id="remaining">280</span></small>
</form>

<script>
const tweet = document.getElementById('tweet');
const remaining = document.getElementById('remaining');

tweet.addEventListener('input', () => {
  const left = 280 - tweet.value.length;
  remaining.textContent = left;
  remaining.style.color = left < 20 ? 'red' : 'inherit';
});
</script>

Required Textarea

<form>
<label for="feedback">Feedback (required):</label>
<textarea id="feedback" name="feedback" rows="4" required
          minlength="10" placeholder="Minimum 10 characters..."></textarea>

<button type="submit">Submit</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="feedback">Feedback (required):</label>
<textarea id="feedback" name="feedback" rows="4" required
          minlength="10" placeholder="Minimum 10 characters..."></textarea>

<button type="submit">Submit</button>
</form>

Read-only Textarea

<form>
<label for="terms">Terms and Conditions:</label>
<textarea id="terms" name="terms" rows="6" readonly>
By using this service, you agree to our terms and conditions.
This text cannot be edited by the user.
You may read but not modify this content.
</textarea>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="terms">Terms and Conditions:</label>
<textarea id="terms" name="terms" rows="6" readonly>
By using this service, you agree to our terms and conditions.
This text cannot be edited by the user.
You may read but not modify this content.
</textarea>
</form>

Disabled Textarea

<style>
textarea:disabled {
  background: #f3f4f6;
  cursor: not-allowed;
}
</style>

<form>
<label for="disabled-field">Unavailable Field:</label>
<textarea id="disabled-field" name="disabled" rows="3" disabled>
This field is disabled and cannot be interacted with.
</textarea>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
textarea:disabled {
  background: #f3f4f6;
  cursor: not-allowed;
}
</style>

<form>
<label for="disabled-field">Unavailable Field:</label>
<textarea id="disabled-field" name="disabled" rows="3" disabled>
This field is disabled and cannot be interacted with.
</textarea>
</form>

Auto-resizing Textarea

<style>
#auto-resize {
  resize: none;
  overflow: hidden;
  min-height: 60px;
}
</style>

<form>
<label for="auto-resize">Auto-expanding Message:</label>
<textarea id="auto-resize" name="message" rows="2"
          placeholder="Type and watch me grow..."></textarea>
</form>

<script>
const textarea = document.getElementById('auto-resize');

function autoResize() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
}

textarea.addEventListener('input', autoResize);
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
#auto-resize {
  resize: none;
  overflow: hidden;
  min-height: 60px;
}
</style>

<form>
<label for="auto-resize">Auto-expanding Message:</label>
<textarea id="auto-resize" name="message" rows="2"
          placeholder="Type and watch me grow..."></textarea>
</form>

<script>
const textarea = document.getElementById('auto-resize');

function autoResize() {
  this.style.height = 'auto';
  this.style.height = this.scrollHeight + 'px';
}

textarea.addEventListener('input', autoResize);
</script>

Textarea with Spell Check

<form>
<label for="spell">With Spell Check:</label>
<textarea id="spell" name="spell" rows="3" spellcheck="true"
          placeholder="Spell check enabled...">Ths has mistaks</textarea>

<label for="no-spell">Without Spell Check:</label>
<textarea id="no-spell" name="no-spell" rows="3" spellcheck="false"
          placeholder="Spell check disabled...">Ths has mistaks</textarea>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="spell">With Spell Check:</label>
<textarea id="spell" name="spell" rows="3" spellcheck="true"
          placeholder="Spell check enabled...">Ths has mistaks</textarea>

<label for="no-spell">Without Spell Check:</label>
<textarea id="no-spell" name="no-spell" rows="3" spellcheck="false"
          placeholder="Spell check disabled...">Ths has mistaks</textarea>
</form>

Text Wrapping

<form action="/submit" method="post">
<label for="soft-wrap">Soft Wrap (default):</label>
<textarea id="soft-wrap" name="soft" rows="3" cols="30" wrap="soft">
This is a very long line that will wrap visually but submit as one long line.
</textarea>

<label for="hard-wrap">Hard Wrap:</label>
<textarea id="hard-wrap" name="hard" rows="3" cols="30" wrap="hard">
This is a very long line that will include line breaks when submitted.
</textarea>

<button type="submit">Submit</button>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form action="/submit" method="post">
<label for="soft-wrap">Soft Wrap (default):</label>
<textarea id="soft-wrap" name="soft" rows="3" cols="30" wrap="soft">
This is a very long line that will wrap visually but submit as one long line.
</textarea>

<label for="hard-wrap">Hard Wrap:</label>
<textarea id="hard-wrap" name="hard" rows="3" cols="30" wrap="hard">
This is a very long line that will include line breaks when submitted.
</textarea>

<button type="submit">Submit</button>
</form>

Advanced Features

Character Counter with Validation

<style>
.char-count {
  font-size: 14px;
  margin-top: 5px;
}
.char-count.warning { color: orange; }
.char-count.danger { color: red; }
</style>

<form>
<label for="review">Product Review (50-500 characters):</label>
<textarea id="review" name="review" rows="5"
          minlength="50" maxlength="500" required></textarea>
<div class="char-count" id="counter">0 / 500 characters (minimum 50)</div>
</form>

<script>
const review = document.getElementById('review');
const counter = document.getElementById('counter');

review.addEventListener('input', () => {
  const length = review.value.length;
  counter.textContent = `${length} / 500 characters (minimum 50)`;

  counter.classList.remove('warning', 'danger');
  if (length > 450) counter.classList.add('danger');
  else if (length > 400) counter.classList.add('warning');
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.char-count {
  font-size: 14px;
  margin-top: 5px;
}
.char-count.warning { color: orange; }
.char-count.danger { color: red; }
</style>

<form>
<label for="review">Product Review (50-500 characters):</label>
<textarea id="review" name="review" rows="5"
          minlength="50" maxlength="500" required></textarea>
<div class="char-count" id="counter">0 / 500 characters (minimum 50)</div>
</form>

<script>
const review = document.getElementById('review');
const counter = document.getElementById('counter');

review.addEventListener('input', () => {
  const length = review.value.length;
  counter.textContent = `${length} / 500 characters (minimum 50)`;

  counter.classList.remove('warning', 'danger');
  if (length > 450) counter.classList.add('danger');
  else if (length > 400) counter.classList.add('warning');
});
</script>

Textarea with Template

<form>
<label for="email-template">Email Template:</label>
<textarea id="email-template" name="email" rows="8">
Dear [Name],

Thank you for your interest in our product.

We would like to schedule a call to discuss your needs.

Best regards,
[Your Name]
</textarea>

<button type="button" onclick="resetTemplate()">Reset Template</button>
</form>

<script>
const defaultTemplate = `Dear [Name],

Thank you for your interest in our product.

We would like to schedule a call to discuss your needs.

Best regards,
[Your Name]`;

function resetTemplate() {
  document.getElementById('email-template').value = defaultTemplate;
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="email-template">Email Template:</label>
<textarea id="email-template" name="email" rows="8">
Dear [Name],

Thank you for your interest in our product.

We would like to schedule a call to discuss your needs.

Best regards,
[Your Name]
</textarea>

<button type="button" onclick="resetTemplate()">Reset Template</button>
</form>

<script>
const defaultTemplate = `Dear [Name],

Thank you for your interest in our product.

We would like to schedule a call to discuss your needs.

Best regards,
[Your Name]`;

function resetTemplate() {
  document.getElementById('email-template').value = defaultTemplate;
}
</script>

Save Draft Functionality

<form>
<label for="draft">Draft Message:</label>
<textarea id="draft" name="draft" rows="5"
          placeholder="Your message is auto-saved..."></textarea>
<small id="save-status">Draft loaded</small>
</form>

<script>
const draft = document.getElementById('draft');
const status = document.getElementById('save-status');

// Load saved draft
draft.value = localStorage.getItem('draft') || '';

// Auto-save every 2 seconds
let timeout;
draft.addEventListener('input', () => {
  clearTimeout(timeout);
  status.textContent = 'Saving...';

  timeout = setTimeout(() => {
    localStorage.setItem('draft', draft.value);
    status.textContent = 'Saved';
  }, 2000);
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="draft">Draft Message:</label>
<textarea id="draft" name="draft" rows="5"
          placeholder="Your message is auto-saved..."></textarea>
<small id="save-status">Draft loaded</small>
</form>

<script>
const draft = document.getElementById('draft');
const status = document.getElementById('save-status');

// Load saved draft
draft.value = localStorage.getItem('draft') || '';

// Auto-save every 2 seconds
let timeout;
draft.addEventListener('input', () => {
  clearTimeout(timeout);
  status.textContent = 'Saving...';

  timeout = setTimeout(() => {
    localStorage.setItem('draft', draft.value);
    status.textContent = 'Saved';
  }, 2000);
});
</script>

Styling Textareas

Custom Styled Textarea

<style>
.custom-textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  resize: vertical;
  transition: border-color 0.2s;
}

.custom-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-textarea::placeholder {
  color: #9ca3af;
}
</style>

<textarea class="custom-textarea" rows="4"
        placeholder="Enter your message..."></textarea>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.custom-textarea {
  width: 100%;
  padding: 12px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-family: inherit;
  font-size: 16px;
  resize: vertical;
  transition: border-color 0.2s;
}

.custom-textarea:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.custom-textarea::placeholder {
  color: #9ca3af;
}
</style>

<textarea class="custom-textarea" rows="4"
        placeholder="Enter your message..."></textarea>

Resize Control

<style>
.resize-none { resize: none; }
.resize-vertical { resize: vertical; }
.resize-horizontal { resize: horizontal; }
.resize-both { resize: both; }

textarea {
  padding: 8px;
  border: 2px solid #ccc;
  margin: 5px 0;
}
</style>

<label>No Resize:</label>
<textarea class="resize-none" rows="2">Cannot resize</textarea>

<label>Vertical Only:</label>
<textarea class="resize-vertical" rows="2">Resize vertically</textarea>

<label>Both Directions:</label>
<textarea class="resize-both" rows="2">Resize any direction</textarea>

Result

Interactive code playground requires JavaScript. Here's the code:

<style>
.resize-none { resize: none; }
.resize-vertical { resize: vertical; }
.resize-horizontal { resize: horizontal; }
.resize-both { resize: both; }

textarea {
  padding: 8px;
  border: 2px solid #ccc;
  margin: 5px 0;
}
</style>

<label>No Resize:</label>
<textarea class="resize-none" rows="2">Cannot resize</textarea>

<label>Vertical Only:</label>
<textarea class="resize-vertical" rows="2">Resize vertically</textarea>

<label>Both Directions:</label>
<textarea class="resize-both" rows="2">Resize any direction</textarea>

Accessibility

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4"></textarea>

<textarea name="comments" rows="4" placeholder="Comments"></textarea>

Provide Helpful Descriptions

<form>
<label for="description">Product Description:</label>
<textarea id="description" name="description" rows="5"
          aria-describedby="desc-help" required></textarea>
<small id="desc-help">
  Describe your product in 50-500 characters.
  Include key features and benefits.
</small>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="description">Product Description:</label>
<textarea id="description" name="description" rows="5"
          aria-describedby="desc-help" required></textarea>
<small id="desc-help">
  Describe your product in 50-500 characters.
  Include key features and benefits.
</small>
</form>

Error Messages

<form>
<label for="message-err">Message:</label>
<textarea id="message-err" name="message" rows="4"
          aria-invalid="true"
          aria-describedby="error-msg" required></textarea>
<div id="error-msg" role="alert" style="color: red;">
  Please enter a message (minimum 10 characters)
</div>
</form>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="message-err">Message:</label>
<textarea id="message-err" name="message" rows="4"
          aria-invalid="true"
          aria-describedby="error-msg" required></textarea>
<div id="error-msg" role="alert" style="color: red;">
  Please enter a message (minimum 10 characters)
</div>
</form>

Character Count Announcements

<form>
<label for="limited">Limited Message (max 100):</label>
<textarea id="limited" name="limited" rows="3" maxlength="100"></textarea>
<div id="char-announce" aria-live="polite" aria-atomic="true">
  100 characters remaining
</div>
</form>

<script>
const textarea = document.getElementById('limited');
const announce = document.getElementById('char-announce');

textarea.addEventListener('input', () => {
  const remaining = 100 - textarea.value.length;
  announce.textContent = `${remaining} characters remaining`;
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<form>
<label for="limited">Limited Message (max 100):</label>
<textarea id="limited" name="limited" rows="3" maxlength="100"></textarea>
<div id="char-announce" aria-live="polite" aria-atomic="true">
  100 characters remaining
</div>
</form>

<script>
const textarea = document.getElementById('limited');
const announce = document.getElementById('char-announce');

textarea.addEventListener('input', () => {
  const remaining = 100 - textarea.value.length;
  announce.textContent = `${remaining} characters remaining`;
});
</script>

Browser Support

Browser	Version	Notes
Chrome	1+	Full support
Firefox	1+	Full support
Safari	1+	Full support
Edge	12+	Full support
IE	3+	Full support

The <textarea> element has been supported since the earliest browsers. Modern validation attributes require HTML5-capable browsers.

For single-line text input. Learn more →

Associates descriptive text with textarea. Learn more →

<textarea> - The Text Area Element

The <textarea> Element

Quick Example

Syntax

Attributes

Core Attributes

Validation Attributes

Other Attributes

Common Use Cases

Basic Textarea

Textarea with Character Limit

Required Textarea

Read-only Textarea

Disabled Textarea

Auto-resizing Textarea

Textarea with Spell Check

Text Wrapping

Advanced Features

Character Counter with Validation

Textarea with Template

Save Draft Functionality

Styling Textareas

Custom Styled Textarea

Resize Control

Accessibility

Always Use Labels

Provide Helpful Descriptions

Error Messages

Character Count Announcements

Browser Support

Related Elements

Specifications

The `<textarea>` Element