The <textarea> element allows users to enter multiple lines of text. Unlike regular input fields that are limited to a single line, textareas expand to accommodate paragraphs, comments, messages, and other longer text content.
What is a Textarea?
A textarea is a multi-line text input control that's perfect for collecting larger amounts of text from users. It's commonly used for:
- Comments and feedback
- Messages and correspondence
- Product reviews
- Blog post content
- Descriptions and notes
- Cover letters and applications
Basic Textarea Syntax
Unlike the self-closing <input> tag, textarea is a paired tag with opening and closing elements:
basic-textarea.html
<label for="message">Your Message:</label>
<textarea id="message" name="message"></textarea>
<!-- With default content -->
<label for="bio">Biography:</label>
<textarea id="bio" name="bio">
This text appears inside the textarea when the page loads.
Users can edit or delete it.
</textarea>The default value goes between the opening and closing tags, NOT in a value attribute like with input elements.
Important Textarea Attributes
rows and cols
The rows attribute sets the visible height, while cols sets the visible width (in characters):
rows-cols.html
<!-- Small textarea: 4 rows, 30 columns -->
<textarea name="short-message" rows="4" cols="30"></textarea>
<!-- Medium textarea: 8 rows, 50 columns -->
<textarea name="description" rows="8" cols="50"></textarea>
<!-- Large textarea: 15 rows, 70 columns -->
<textarea name="essay" rows="15" cols="70"></textarea>In modern web development, it's more common to use CSS for sizing rather than rows and cols attributes.
maxlength and minlength
Control the character limits for textarea content:
length-limits.html
<!-- Twitter-style character limit -->
<label for="tweet">Tweet (max 280 characters):</label>
<textarea
id="tweet"
name="tweet"
maxlength="280"
rows="4"
></textarea>
<!-- Comment with minimum length -->
<label for="comment">Comment (minimum 10 characters):</label>
<textarea
id="comment"
name="comment"
minlength="10"
maxlength="500"
rows="5"
></textarea>placeholder
Provide hint text that disappears when users start typing:
placeholder.html
<label for="feedback">Your Feedback:</label>
<textarea
id="feedback"
name="feedback"
placeholder="Tell us what you think..."
rows="6"
></textarea>
<label for="description">Product Description:</label>
<textarea
id="description"
name="description"
placeholder="Enter product details, features, and specifications..."
rows="8"
></textarea>required
Make the textarea mandatory before form submission:
required-textarea.html
<label for="message">Message:</label>
<textarea
id="message"
name="message"
required
rows="5"
></textarea>readonly and disabled
Control whether users can edit the textarea:
readonly-disabled.html
<!-- Readonly: visible but not editable, value is submitted -->
<label for="terms">Terms and Conditions:</label>
<textarea id="terms" name="terms" readonly rows="10">
By using this service, you agree to our terms...
</textarea>
<!-- Disabled: grayed out, not editable, value is NOT submitted -->
<label for="notes">Admin Notes:</label>
<textarea id="notes" name="notes" disabled rows="5">
This field is currently disabled.
</textarea>wrap
The wrap attribute controls how text wraps when submitted:
wrap-attribute.html
<!-- soft: line breaks are not sent to server (default) -->
<textarea name="message" wrap="soft"></textarea>
<!-- hard: line breaks are included when submitted -->
<textarea name="message" wrap="hard" cols="50"></textarea>Styling Textareas
CSS can be used to make textareas more attractive and user-friendly:
styled-textarea.html
<style>
textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
font-family: Arial, sans-serif;
line-height: 1.5;
resize: vertical; /* Allow vertical resizing only */
transition: border-color 0.3s;
}
textarea:focus {
outline: none;
border-color: #4CAF50;
}
textarea::placeholder {
color: #999;
font-style: italic;
}
</style>
<label for="message">Your Message:</label>
<textarea
id="message"
name="message"
placeholder="Type your message here..."
rows="6"
></textarea>The resize Property
By default, textareas can be resized by users. You can control this behavior with CSS:
resize-options.css
/* Allow both horizontal and vertical resizing (default) */
textarea {
resize: both;
}
/* Allow only vertical resizing (recommended) */
textarea {
resize: vertical;
}
/* Allow only horizontal resizing */
textarea {
resize: horizontal;
}
/* Disable resizing completely */
textarea {
resize: none;
}Adding a Character Counter
You can add a character counter to help users stay within limits:
character-counter.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Textarea with Character Counter</title>
<style>
.textarea-container {
max-width: 600px;
margin: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
resize: vertical;
}
.counter {
text-align: right;
font-size: 14px;
color: #666;
margin-top: 5px;
}
.counter.warning {
color: #ff6b6b;
font-weight: bold;
}
</style>
</head>
<body>
<div class="textarea-container">
<label for="bio">Bio (max 200 characters):</label>
<textarea
id="bio"
name="bio"
maxlength="200"
rows="5"
oninput="updateCounter()"
></textarea>
<div class="counter">
<span id="current">0</span> / <span id="maximum">200</span> characters
</div>
</div>
<script>
function updateCounter() {
const textarea = document.getElementById('bio');
const current = document.getElementById('current');
const counter = document.querySelector('.counter');
const max = 200;
const length = textarea.value.length;
current.textContent = length;
// Add warning class when approaching limit
if (length > max * 0.9) {
counter.classList.add('warning');
} else {
counter.classList.remove('warning');
}
}
</script>
</body>
</html>Textarea vs. Input
Understanding when to use textarea instead of input:
textarea-vs-input.html
<!-- Use INPUT for single-line text -->
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- Use TEXTAREA for multi-line text -->
<label for="bio">Biography:</label>
<textarea id="bio" name="bio" rows="5"></textarea>
<label for="comments">Additional Comments:</label>
<textarea id="comments" name="comments" rows="4"></textarea>Complete Contact Form Example
contact-form-textarea.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Form</title>
<style>
form {
max-width: 600px;
margin: 40px auto;
padding: 30px;
background: #f9f9f9;
border-radius: 8px;
}
h2 {
margin-top: 0;
color: #333;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
}
input, textarea {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
font-family: inherit;
}
textarea {
resize: vertical;
min-height: 120px;
}
input:focus, textarea:focus {
outline: none;
border-color: #4CAF50;
}
button {
width: 100%;
padding: 14px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.char-count {
text-align: right;
font-size: 14px;
color: #666;
margin-top: 5px;
}
</style>
</head>
<body>
<form action="/submit-contact" method="post">
<h2>Contact Us</h2>
<div class="form-group">
<label for="name">Name:</label>
<input
type="text"
id="name"
name="name"
required
>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input
type="email"
id="email"
name="email"
required
>
</div>
<div class="form-group">
<label for="subject">Subject:</label>
<input
type="text"
id="subject"
name="subject"
required
>
</div>
<div class="form-group">
<label for="message">Message:</label>
<textarea
id="message"
name="message"
placeholder="Tell us how we can help you..."
minlength="10"
maxlength="1000"
required
></textarea>
<div class="char-count">Max 1000 characters</div>
</div>
<button type="submit">Send Message</button>
</form>
</body>
</html>Best Practices
Set Appropriate Size
Make textareas large enough to display a reasonable amount of content without scrolling:
appropriate-size.html
<!-- Too small for comments (bad) -->
<textarea rows="2"></textarea>
<!-- Good size for comments -->
<textarea rows="5"></textarea>
<!-- Good size for longer content -->
<textarea rows="10"></textarea>Provide Clear Hints
Use labels and placeholders to guide users:
clear-hints.html
<label for="review">Product Review:</label>
<textarea
id="review"
name="review"
placeholder="Share your experience with this product..."
minlength="50"
rows="6"
></textarea>
<small>Please write at least 50 characters</small>Set Reasonable Length Limits
Use maxlength to prevent excessive text:
length-limits-best.html
<!-- Social media post -->
<textarea maxlength="280" rows="4"></textarea>
<!-- Product description -->
<textarea maxlength="500" rows="6"></textarea>
<!-- Article or blog post -->
<textarea maxlength="5000" rows="15"></textarea>Accessibility Tips
- Always provide a label for each textarea
- Use descriptive label text that explains what to enter
- Include character count information when there are limits
- Ensure sufficient contrast between text and background
- Make the focus state clearly visible
- Don't rely solely on placeholder text—it disappears when users type
Key Takeaways
- Use
<textarea>for multi-line text input - Default content goes between opening and closing tags
- The
rowsattribute sets height,colssets width - Use CSS for more precise sizing control
resize: verticalallows vertical resizing onlymaxlengthlimits characters,minlengthsets minimums- Always pair textareas with descriptive labels
- Consider adding character counters for limited-length fields
What's Next?
Now that you understand textareas for multi-line input, the next lesson will cover checkboxes—a form element that allows users to select multiple options from a list of choices.