HTML Textarea: Syntax, Usage, and Examples

The HTML textarea element creates a multi-line text input field where users can type paragraphs of text. Whether you're building a feedback form, comment section, or contact page, the <textarea> tag is the go-to solution for collecting longer user input.

How to Use the HTML Textarea Element

To create a textarea HTML field, use the <textarea> tag. Unlike <input type="text">, which only supports single-line input, <textarea> allows for multiple lines.

Here's the basic syntax:

<textarea></textarea>

You can add the rows and cols attributes to define the height and width in characters:

<textarea rows="5" cols="30"></textarea>

This gives you a visible area with 5 rows and 30 columns (characters wide).

You can also include default text inside the element:

<textarea rows="4" cols="50">This is pre-filled text.</textarea>

This makes it easy to show sample input or reuse saved content.

When to Use Textarea in HTML

Use a textarea when your form needs input that goes beyond just a single word or short phrase.

Collecting User Feedback

Textareas are ideal for feedback boxes where users can freely express thoughts or suggestions.

<label for="feedback">Your feedback:</label><br>
<textarea id="feedback" name="feedback" rows="6" cols="50"></textarea>

This gives users enough space to type detailed comments.

Contact Forms

If you’re building a contact form, include a textarea for messages:

<form action="/submit" method="post">
  <label for="message">Message:</label><br>
  <textarea id="message" name="message" rows="5" cols="40"></textarea>
  <br><button type="submit">Send</button>
</form>

This structure creates a simple HTML form with textarea input.

Comment Sections

Blog posts, forums, and community pages often use textareas for posting comments or replies.

<p>Leave a comment:</p>
<textarea rows="4" cols="60" placeholder="Write your comment here..."></textarea>

The placeholder attribute gives users a hint without pre-filling actual data.

Examples of HTML Textarea in Action

Let’s explore several examples of textarea HTML implementation.

Textarea with Placeholder

<textarea rows="5" cols="40" placeholder="Enter your response here..."></textarea>

The placeholder disappears when the user starts typing.

Textarea with Character Limit

Use the maxlength attribute to restrict how much users can type.

<textarea rows="5" cols="40" maxlength="200"></textarea>

This is helpful when you want to limit input without trimming it later via code.

Resizable Textarea

By default, users can drag to resize textareas. If you want to prevent that, add CSS:

<textarea rows="4" cols="50" style="resize: none;"></textarea>

This locks the size of the field so it stays consistent.

Textarea with Default Value

<textarea rows="3" cols="30">Initial content inside the textarea.</textarea>

You can prefill this with saved drafts or template text.

Learn More About HTML for Textarea Usage

HTML Input Textarea in Forms

Textareas work seamlessly with other input types in HTML forms. Here’s a full example:

<form action="/submit" method="post">
  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name"><br><br>

  <label for="comments">Comments:</label><br>
  <textarea id="comments" name="comments" rows="6" cols="50"></textarea><br><br>

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

This form collects both a name (using <input>) and a message (using <textarea>). When submitted, both values are sent to the server.

Styling Textareas with CSS

You can customize the appearance of a textarea with CSS to match your site's design.

<style>
  textarea.custom-box {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
    resize: vertical;
  }
</style>

<textarea class="custom-box" rows="5" placeholder="Your message..."></textarea>

This gives the textarea a cleaner, modern look and ensures it works well across devices.

Disabling or Making Textarea Read-Only

Use the disabled attribute to prevent user input entirely:

<textarea disabled>This field is disabled.</textarea>

Or use readonly to allow users to copy text but not edit it:

<textarea readonly>This is read-only text.</textarea>

This is useful for displaying terms or generated content that shouldn’t be modified.

Auto-Focus a Textarea

To put the cursor inside the textarea when the page loads, use the autofocus attribute:

<textarea autofocus placeholder="Start typing..."></textarea>

This improves usability for single-focus forms like search boxes or chat windows.

HTML Form with Textarea and Validation

You can combine the textarea in HTML with built-in validation. For example, use required to make sure the user fills it out before submitting:

<form>
  <label for="bio">Short Bio (required):</label><br>
  <textarea id="bio" name="bio" rows="5" cols="50" required></textarea><br>
  <button type="submit">Submit</button>
</form>

Browsers will automatically prevent form submission if the textarea is left empty.

Using JavaScript with Textarea HTML

You can dynamically read or change the content inside a textarea with JavaScript.

<textarea id="notes" rows="4" cols="40"></textarea>
<button onclick="updateTextarea()">Fill with sample text</button>

<script>
  function updateTextarea() {
    document.getElementById("notes").value = "This is some sample text added with JavaScript.";
  }
</script>

This is great for templates, editing features, or showing saved drafts.

Auto-Expanding Textarea

To improve user experience, you might want a textarea that grows as the user types:

<textarea id="autoExpand" rows="1" oninput="this.style.height = ''; this.style.height = this.scrollHeight + 'px';" style="overflow:hidden;"></textarea>

This automatically adjusts the height based on the content without scrollbars.

Accessibility and Best Practices

To keep your HTML textarea accessible:

• Always use a <label> and associate it with the textarea using for and id.
• Use placeholder text to guide users, but don’t rely on it as a replacement for labels.
• Set aria-label or aria-describedby for screen reader support when needed.
• Avoid setting extremely small rows values—users need space to see their input.

When you're building forms, follow semantic HTML practices. Wrap inputs and textareas in <form> tags, and use method and action attributes properly. Maintain consistency in spacing and label formatting across your form layout.

Using textarea HTML elements correctly ensures you collect useful information from users and provide them with a smooth writing experience. Whether you're building a full HTML form with textarea, adding feedback fields, or just learning how to use textareas effectively, this tag is an essential part of your HTML toolbox.