What is the HTML <textarea> element?

Introduction to the <textarea> element

The <textarea> element is a fundamental HTML form component that allows users to enter text across multiple lines. Unlike the <input> element which is limited to a single line of text, the <textarea> provides an expandable input area, perfect for comments, messages, long descriptions, or any textual content requiring more space.

If you want to master HTML forms and create professional user interfaces, our comprehensive HTML course will guide you step by step through learning these essential concepts. You'll discover how to create interactive and accessible forms that meet modern web standards.

In this article, we will explore in depth how the <textarea> element works, its many attributes, practical use cases, and best practices for creating accessible and user-friendly text fields.

Definition and basic syntax

Fundamental structure

The <textarea> element is an HTML form element that creates a multi-line text input area. Unlike most form elements, it requires both an opening and closing tag, and the default text is placed between these tags.

<textarea>Your default text here</textarea>

The basic syntax with the most common attributes looks like this:

<textarea name="message" rows="5" cols="40" placeholder="Write your message..."></textarea>

Here are the key elements of this syntax:

• name: identifies the field when submitting the form
• rows: defines the number of visible lines
• cols: defines the number of visible columns (characters)
• placeholder: displays grayed-out hint text

Difference from the input element

It's important to understand the fundamental difference between <textarea> and <input type="text">:

Association with a label

For better accessibility, you should always associate your <textarea> with a label element. This allows screen readers to correctly identify the field and improves user experience:

<label for="comment">Your comment:</label>
<textarea id="comment" name="comment" rows="4" cols="50"></textarea>

Textarea element attributes

Sizing attributes

The rows and cols attributes define the visible size of the text field. These values represent the number of lines and character width respectively:

<!-- Small comment field -->
<textarea rows="3" cols="30"></textarea>

<!-- Large field for long content -->
<textarea rows="10" cols="80"></textarea>

However, we recommend using CSS to manage dimensions, as it offers more flexibility and better responsive control:

.textarea-believemy {
  width: 100%;
  min-height: 150px;
  max-height: 400px;
  resize: vertical;
}

Behavior attributes

Several attributes control the behavior of the <textarea>:

Here's an example combining several of these attributes:

<form action="/submit" method="post">
  <label for="description">Believemy project description:</label>
  <textarea 
    id="description" 
    name="description" 
    required 
    autofocus
    rows="6"
    placeholder="Describe your training project..."
  ></textarea>
  <button type="submit">Submit</button>
</form>

Validation attributes

HTML5 introduced native validation attributes for <textarea> that allow client-side content verification before form submission:

<textarea 
  name="review" 
  minlength="20" 
  maxlength="500"
  required
  placeholder="Your review must contain between 20 and 500 characters"
></textarea>

• minlength: minimum number of required characters
• maxlength: maximum number of allowed characters
• required: makes the field mandatory

The wrap attribute explained

The wrap attribute controls how text is formatted when the form is submitted:

• soft (default): text appears with visual line breaks, but they are not included when submitted
• hard: line breaks are included in the submitted data (requires the cols attribute)
• off: no automatic line wrapping, text scrolls horizontally

<!-- The submitted text will contain line breaks -->
<textarea wrap="hard" cols="40" name="formatted_text"></textarea>

Practical examples and use cases

Complete contact form

Here's an example of a professional contact form integrating a <textarea> for the message:

<form action="/contact" method="post" class="contact-form">
  <div class="field">
    <label for="name">Your name:</label>
    <input type="text" id="name" name="name" required>
  </div>
  
  <div class="field">
    <label for="email">Your email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div class="field">
    <label for="subject">Message subject:</label>
    <input type="text" id="subject" name="subject" required>
  </div>
  
  <div class="field">
    <label for="message">Your message:</label>
    <textarea 
      id="message" 
      name="message" 
      rows="8" 
      required
      minlength="50"
      maxlength="2000"
      placeholder="Describe your request in detail (minimum 50 characters)..."
    ></textarea>
  </div>
  
  <button type="submit">Send message</button>
</form>

Comment system

For a comment system on a site like Believemy, we can create a styled and functional <textarea>:

<div class="comments-section">
  <h3>Leave a comment on this course</h3>
  
  <form action="/comments/add" method="post">
    <input type="hidden" name="course_id" value="html-css">
    
    <div class="form-group">
      <label for="comment">Your comment:</label>
      <textarea 
        id="comment" 
        name="content"
        rows="5"
        required
        minlength="10"
        maxlength="1000"
        placeholder="Share your experience with this Believemy course..."
      ></textarea>
      <span class="character-counter">0 / 1000</span>
    </div>
    
    <button type="submit" class="btn-comment">Post comment</button>
  </form>
</div>

Simple content editor

For a content editing interface, the <textarea> can serve as the base for a more complex editor:

<div class="content-editor">
  <div class="toolbar">
    <button type="button" data-action="bold"><strong>B</strong></button>
    <button type="button" data-action="italic"><em>I</em></button>
    <button type="button" data-action="link">🔗</button>
  </div>
  
  <textarea 
    id="editor" 
    name="article_content"
    rows="20"
    placeholder="Write your article here..."
    spellcheck="true"
  ></textarea>
  
  <div class="preview" id="preview"></div>
</div>

CSS styling for textarea

Basic styles

The <textarea> can be fully customized with CSS. Here's an example of modern styles:

/* Basic textarea style */
.textarea-believemy {
  width: 100%;
  min-height: 120px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #fff;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  resize: vertical;
}

/* Focus state */
.textarea-believemy:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

/* Disabled state */
.textarea-believemy:disabled {
  background-color: #f5f5f5;
  color: #999;
  cursor: not-allowed;
}

/* Invalid state */
.textarea-believemy:invalid {
  border-color: #e53e3e;
}

/* Placeholder */
.textarea-believemy::placeholder {
  color: #999;
  opacity: 1;
}

Resize control

By default, browsers allow users to resize the <textarea>. You can control this behavior with the CSS resize property:

/* Allow only vertical resizing */
.textarea-vertical {
  resize: vertical;
}

/* Allow only horizontal resizing */
.textarea-horizontal {
  resize: horizontal;
}

/* Allow both directions (default) */
.textarea-both {
  resize: both;
}

/* Prevent all resizing */
.textarea-fixed {
  resize: none;
}

Responsive design

For a <textarea> that adapts to all screens:

.textarea-responsive {
  width: 100%;
  min-height: 100px;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .textarea-responsive {
    min-height: 150px;
  }
}

@media (min-width: 1024px) {
  .textarea-responsive {
    min-height: 200px;
  }
}

Best practices and accessibility

Textarea accessibility

To make your <textarea> elements accessible to all users, follow these essential recommendations:

• Always use a label: associate each textarea with a label using the for and id attributes
• Provide clear instructions: use the aria-describedby attribute to link additional instructions
• Indicate required fields: use aria-required="true" in addition to the required attribute
• Handle errors: use aria-invalid and aria-errormessage to signal issues

<div class="form-group">
  <label for="bio">Your biography <span class="required">*</span></label>
  <span id="bio-instructions" class="instructions">
    Describe yourself in a few sentences (50-500 characters)
  </span>
  <textarea 
    id="bio" 
    name="biography"
    aria-describedby="bio-instructions bio-error"
    aria-required="true"
    minlength="50"
    maxlength="500"
    required
  ></textarea>
  <span id="bio-error" class="error" role="alert"></span>
</div>

Performance optimization

For <textarea> elements that may contain a lot of text, consider these optimizations:

• Debounce events: limit the frequency of processing on input or keyup events
• Lazy load content: for very long texts, load content progressively
• Limit maximum size: use maxlength to prevent abuse

<!-- Optimized textarea with performance attributes -->
<textarea 
  id="course-content"
  name="content"
  maxlength="10000"
  spellcheck="false"
  autocomplete="off"
  autocapitalize="sentences"
></textarea>

Security and validation

Never forget that client-side validation is only a user convenience. You MUST always validate and sanitize data server-side:

Common mistakes to avoid

Mistake 1: Forgetting the closing tag

Unlike <input>, the <textarea> requires a closing tag:

<!-- ❌ INCORRECT -->
<textarea name="message" />

<!-- ✅ CORRECT -->
<textarea name="message"></textarea>

Mistake 2: Using the value attribute

The <textarea> doesn't use the value attribute. Default content goes between the tags:

<!-- ❌ INCORRECT -->
<textarea name="message" value="Default text"></textarea>

<!-- ✅ CORRECT -->
<textarea name="message">Default text</textarea>

Mistake 3: Unwanted whitespace

Be careful with spaces and line breaks between tags, they will be included as content:

<!-- ❌ INCORRECT - contains whitespace -->
<textarea name="message">
  
</textarea>

<!-- ✅ CORRECT - no extra whitespace -->
<textarea name="message"></textarea>

Mistake 4: Neglecting accessibility

Never forget to associate a label with your <textarea>:

<!-- ❌ INCORRECT -->
<textarea name="comment" placeholder="Your comment"></textarea>

<!-- ✅ CORRECT -->
<label for="comment">Your comment:</label>
<textarea id="comment" name="comment"></textarea>

Browser compatibility

The <textarea> element enjoys excellent compatibility with all modern and legacy browsers:

HTML5 attributes like placeholder, minlength, maxlength, and required have been supported by all modern browsers for several years.

Frequently asked questions about textarea

The rows and cols attributes define dimensions in terms of characters and lines, while CSS allows precise control in pixels, percentages, or other units. We recommend using CSS for layout, as it offers more flexibility and better adaptation to different screen sizes.

Use the CSS property resize: none; to completely block resizing, or resize: vertical; to allow only vertical resizing, which is generally the best compromise between usability and layout control.

You can use JavaScript to listen to the input event on the <textarea> and update a counter displayed next to the field. Combine this with the maxlength attribute to automatically limit input.

To perfectly master HTML forms and all elements like <textarea>, we recommend following our course to learn HTML. You'll discover all the techniques to create professional, accessible forms optimized for SEO.