HTML Textarea: The <textarea> Element for Multi-Line Text Input

The <textarea> element lets users enter multi-line text in HTML forms, such as comments, messages, descriptions, and feedback. It is the standard control to use when a single-line <input type="text"> is not enough.

Quick answer: Use <textarea> for multi-line text, add a name so the value is submitted, and connect it to a <label> for accessibility.

Difficulty: Beginner

You'll understand this better if you know: basic HTML forms, how form controls submit values, and how labels connect to inputs.

1. What Is the <textarea> Element?

The <textarea> element is a form control for entering plain text across multiple lines. Unlike most other form inputs, it is not a void element, so it has an opening tag, a closing tag, and optional default text inside the element.

It is used for longer text entry such as comments, messages, and notes.
It can display multiple visible rows and support scrolling when content grows.
It submits plain text as part of a form when it has a name attribute.
It supports standard form features such as required, disabled, and maxlength.

Because users can press Enter inside a <textarea>, it is the right choice whenever line breaks are part of the intended input.

2. Why <textarea> Matters

Many forms need more than short, one-line text. A comment box, shipping instructions field, or support ticket description all require a control that can hold longer content comfortably.

<textarea> matters because it improves both usability and data quality. Users can see more of what they are typing, edit longer text more easily, and include line breaks when needed.

It also gives you built-in browser behavior for validation, form submission, focus handling, and accessibility, so you do not need to build a custom text editor for simple cases.

3. Basic Syntax or Core Idea

The simplest <textarea> has an opening tag, content inside, and a closing tag. The inner text becomes the initial value shown to the user.

Minimal example

This example shows the smallest useful pattern for a textarea in a form.

<form action="/feedback" method="post">
  <label for="message">Message</label>
  <textarea id="message" name="message">Write your message here.</textarea>
  <button type="submit">Send</button>
</form>

Here, id connects the control to the label, name defines the field name submitted with the form, and the text between the tags is the initial content.

4. Step-by-Step Examples

Example 1: A basic contact message field

A common use of <textarea> is a contact form where the user needs space to write a longer message.

<form action="/contact" method="post">
  <label for="contact-message">Your message</label>
  <textarea id="contact-message" name="message" rows="6"></textarea>
  <button type="submit">Send</button>
</form>

The rows attribute sets the initial visible height. The field still grows with content if the browser allows scrolling.

Example 2: A textarea with placeholder text

Placeholders help indicate the expected content without becoming the submitted value.

<label for="bio">Short bio</label>
<textarea id="bio" name="bio" placeholder="Tell us a little about yourself"></textarea>

The placeholder disappears when the user begins typing, so it should not replace a real label.

Example 3: Required validation for a comment box

You can require a user to enter something before submission by using the required attribute.

<label for="comment">Comment</label>
<textarea id="comment" name="comment" required></textarea>

With this markup, the browser will block empty submission and show a built-in validation message if the field is left blank.

Example 4: Limiting length for a support ticket

The maxlength attribute helps keep user input within a practical size.

<label for="details">Issue details</label>
<textarea id="details" name="details" rows="8" maxlength="500"></textarea>

This limits the total number of characters the user can enter, which is useful when your backend or database expects a bounded field length.

5. Practical Use Cases

Use <textarea> when the content is naturally multi-line or can become long. Common examples include:

Contact form messages and customer support requests
Blog comments and forum posts
Profile bios and personal descriptions
Shipping instructions, delivery notes, or special requests
Bug reports, reproduction steps, and issue descriptions
Internal notes fields in admin panels or dashboards

For short, fixed-format input such as a first name, email address, or search term, a single-line <input> is usually the better choice.

6. Common Mistakes

Mistake 1: Using a textarea without a name

A textarea only submits a value with a form when it has a name attribute. Without it, the browser keeps the user input on screen, but the server never receives the field.

Problem: The field looks correct, but the submitted form data is missing the textarea value because unnamed controls are not included in form submission.

<form action="/comment" method="post">
  <label for="comment">Comment</label>
  <textarea id="comment"></textarea>
  <button type="submit">Post</button>
</form>

Fix: Add a meaningful name value so the form can send the data.

<form action="/comment" method="post">
  <label for="comment">Comment</label>
  <textarea id="comment" name="comment"></textarea>
  <button type="submit">Post</button>
</form>

The corrected version works because the browser includes the field as part of the submitted form data.

Mistake 2: Trying to use the value attribute like an input

Unlike many input controls, the initial content of a textarea is placed between the opening and closing tags. The value attribute is not how you set default text in HTML.

Problem: The browser treats the attribute as plain text or ignores it for initial content, so the textarea does not start with the intended default value.

<label for="bio">Bio</label>
<textarea id="bio" name="bio" value="I like hiking."></textarea>

Fix: Put the default text between the tags instead of using value.

<label for="bio">Bio</label>
<textarea id="bio" name="bio">I like hiking.</textarea>

The corrected version works because textarea initial content is defined by its inner text.

Mistake 3: Leaving out an accessible label

A placeholder is not a replacement for a label. If a textarea has no label, screen reader users may not know what the field is for, and the purpose can be unclear even for sighted users once the placeholder disappears.

Problem: The control has no programmatic label, which makes the form harder to use and can fail accessibility checks.

<textarea name="message" placeholder="Enter your message"></textarea>

Fix: Connect the textarea to a visible <label> using for and id.

<label for="message">Message</label>
<textarea id="message" name="message" placeholder="Enter your message"></textarea>

The corrected version works because the label gives the control a clear, accessible name.

7. Best Practices

Practice 1: Always pair a textarea with a label

A visible label makes the field understandable, easier to click, and better for assistive technology. This is one of the most important accessibility habits for forms.

<label for="notes">Additional notes</label>
<textarea id="notes" name="notes"></textarea>

This pattern gives the control a clear purpose and a larger click target.

Practice 2: Use rows and maxlength to match the task

Set a reasonable visible height and a character limit when the form has a known business rule or storage constraint. That reduces friction and prevents overly large submissions.

<label for="summary">Summary</label>
<textarea id="summary" name="summary" rows="4" maxlength="200"></textarea>

The field is easier to scan, and the limit sets a clear expectation for users.

Practice 3: Use placeholder text for hints, not instructions

Placeholder text should supplement the label, not replace it. Keep it short and use it for examples or formatting hints only.

<label for="postal-instructions">Delivery instructions</label>
<textarea id="postal-instructions" name="instructions" placeholder="For example: leave at front desk"></textarea>

This keeps the form understandable even after the user starts typing.

8. Limitations and Edge Cases

<textarea> stores plain text, not rich formatting. If you need bold text, links, or structured editing, you need a different solution.
It does not support a true value attribute for initial content the way <input> does.
The element can scroll when content exceeds the visible area unless you change sizing behavior with CSS.
Different browsers may render the control with slightly different default sizing and resizing handles.
Trailing newlines and line breaks can matter when your backend processes the submitted text, so normalize input if your application requires it.
The wrap attribute affects how line wrapping behaves on form submission, but browser behavior can vary if CSS also controls wrapping and width.

One practical surprise is that the initial whitespace inside the element can become part of the default text if you indent it carelessly. Keep default content intentional and simple.

9. Practical Mini Project

Here is a small, complete feedback form that uses <textarea> correctly with labels, required validation, and sensible sizing.

<form action="/feedback" method="post">
  <fieldset>
    <legend>Send feedback</legend>

    <label for="name">Name</label>
    <input type="text" id="name" name="name" required>

    <label for="feedback">Your feedback</label>
    <textarea id="feedback" name="feedback" rows="6" maxlength="1000" required placeholder="Tell us what worked well and what could improve"></textarea>

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

This form is practical because it gives the textarea a clear purpose, a readable size, a character limit, and built-in validation. It also uses semantic form elements that help screen readers and improve structure.

10. Key Points

<textarea> is the HTML control for multi-line plain text input.
The content between the tags acts as the initial value.
A name attribute is required if you want the value submitted with the form.
Always provide a label so users and assistive technologies know what the field means.
Use attributes like rows, required, and maxlength to improve usability and validation.

11. Practice Exercise

Create a form with a textarea for an "about me" section.
Give it a visible label, a useful placeholder, and a default height.
Make the field required and limit it to 250 characters.
Ensure the value will be submitted with the form.

Expected output: A semantic form control that can collect a short multi-line bio and submit it successfully.

Hint: Remember that the default text goes inside the <textarea> tags, not in a value attribute.

<form action="/profile" method="post">
  <label for="about-me">About me</label>
  <textarea id="about-me" name="aboutMe" rows="5" maxlength="250" required placeholder="Write a short introduction">Hello! I enjoy building accessible interfaces.</textarea>
  <button type="submit">Save profile</button>
</form>

12. Final Summary

The <textarea> element is the standard HTML control for multi-line plain text input. It is the right choice when users need to enter longer content, line breaks, or detailed descriptions.

To use it well, give it a name, connect it to a label, choose a sensible visible size, and add validation attributes when needed. Remember that its initial value belongs between the tags, not in a value attribute.

If you want to go further, the next useful topic is how to style form controls with CSS while keeping labels, focus states, and validation messages accessible.