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
- Always use labels: Provide clear, descriptive labels for all textareas
- Appropriate sizing: Use rows and cols attributes for initial sizing, but allow CSS to control final appearance
- Validation: Implement client-side validation with appropriate attributes
- Accessibility: Use aria-label and aria-describedby for screen readers
- Placeholder text: Provide helpful placeholder text that explains expected input
- Character limits: Use maxlength for very long content to prevent abuse
- 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
Related Elements
-
<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