HTML Textarea Tag: How it Works with Examples

The HTML textarea tag gives users space to enter longer messages. This element helps build forms that accept feedback, comments, or notes. You can use it to improve interaction on your website.

What is the Textarea Tag in HTML?

The <textarea> tag defines a multi-line text input field. Unlike an input box, it allows users to type paragraphs.

Here is the basic syntax:

<textarea name="message" rows="4" cols="50"></textarea>

You use the name attribute to identify the field in form submissions. rows and cols set its size.

It collects large user input. Forms with textareas help people write feedback, support requests, or reviews.

The <textarea> tag uses both opening and closing tags. Text inside the tags appears as the default value.

<textarea>Default text here</textarea>

You can use a placeholder to guide users.

<textarea placeholder="Write your message here"></textarea>

This text shows until users type something.

Here is a quick example:

<form>
  <label for="comment">Comment:</label>
  <textarea id="comment" name="comment" rows="5" cols="40"></textarea>
</form>

This code creates a labeled text area in a form.

Key Attributes of <textarea>

The <textarea> element creates a multi-line text input field. You can customize its behavior and appearance with several attributes. Below is an in-depth look at each of them.

The name Attribute

This attribute specifies the name of the <textarea>. This name is used as the key when the form data is submitted. For example:

<textarea name="comments"></textarea>

The <textarea> data will not be sent without a name to the server when the form is submitted.

The row Attribute

The rows attribute sets the number of visible text lines in the textarea.

Here is an example:

<textarea rows="4"></textarea>

• Controls the vertical size of the field.
• The default value is 2 if not specified.

The cols Attribute

It defines the visible width of the textarea in characters.

<textarea cols="50"></textarea>

• Controls the horizontal size.
• You can use modern CSS for precise sizes, but cols is still a valid attribute.

The placeholder Attribute

The placeholder attribute provides a hint or example text displayed when the textarea is empty.

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

• The text disappears when the user types something.
• Helps guide users on what to enter.

The maxlength Attribute

It sets the maximum number of characters allowed. For example:

<textarea maxlength="200"></textarea>

• If the user tries to type more, the browser prevents additional input.
• It limits submissions (e.g., tweets, comments).

The readonly Attribute

It makes the textarea not editable but still selectable.

<textarea readonly>This text cannot be edited.</textarea>

• Users can copy the text.
• The content is submitted with the form.

The disabled Attribute

It makes the textarea not editable and not focusable. For example:

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

• Greyed out by default.
• Content is not submitted with the form.

The required Attribute

It makes sure the textarea contains input before form submission.

<textarea required></textarea>

The browser shows a validation message if left empty.

The wrap Attribute

The wrap attribute controls how text wraps when the user types beyond the visible width.
Values:

• soft – Text does not automatically wrap. When submitted, lines are preserved as entered.
• hard – Text automatically wraps to the next line, and line breaks are inserted into the submitted value.

Here is an example:

<textarea wrap="hard"></textarea>

• Default is soft.
• Use hard if you want to keep the visual line breaks in the data.

The autofocus Attribute

The autofocus attribute makes the <textarea> automatically receive focus (cursor active) when the page loads. For example:

<textarea autofocus></textarea>

• Only one element per page can have autofocus.
• Useful for improving usability in forms where you want users to start typing immediately.
• Works only if the page is not opened in a new tab by script (some browsers block it for security or UX).

The spellcheck Attribute

The spellcheck attribute enables or disables the browser’s spell check for text in the textarea.

For example:

<textarea spellcheck="true"></textarea>

Accepted values:

• true: Enables spellcheck.
• false: Disables spellcheck.

The Difference Between <textarea> and <input type="text">

The <textarea> Supports multiple lines. Lets users write longer, structured content. You can control size with rows and cols.

The <input type="text"> Handles single-line input. Good for short text like names or email addresses. You use the size attribute to adjust the width.

Here is a table that shows you key differences:

Use <textarea> for long-form responses. Use <input type="text"> for short entries.

Examples of the textarea Tag in HTML

Pre-filled Value:

<textarea>Thank you for your feedback.</textarea>

Shows default text users can edit.

Resizable vs Non-Resizable Textareas with CSS

<textarea style="resize: none;">Fixed size textarea</textarea>

Prevents resizing with CSS.

Textareas Inside Forms and How They Behave on Submission

<form>
  <label for="feedback">Your Feedback:</label>
  <textarea id="feedback" name="feedback" required></textarea>
  <button type="submit">Send</button>
</form>

It sends the user’s text to the server with the form.

Combine several attributes:

<textarea
  name="feedback"
  rows="5"
  cols="40"
  placeholder="Write your feedback here..."
  maxlength="300"
  required
  wrap="hard"
></textarea>

Here is how it works:

• Has a visible size of 5 lines and 40 characters wide.
• Shows a placeholder.
• Limits input to 300 characters.
• Requires input before form submission.
• Automatically wraps lines in submitted data.

Auto-Adjust the Height of a <textarea> in HTML

Here, you can use JavaScript to adjust the height.

<textarea id="autoTextarea"></textarea>
<script>
  const ta = document.getElementById('autoTextarea');
  ta.addEventListener('input', () => {
    ta.style.height = 'auto';
    ta.style.height = ta.scrollHeight + 'px';
  });
</script>

This code grows the field as the user types.

How to Style a Textarea Tag with CSS

Width, Height, Borders, Padding:

textarea {
  width: 300px;
  height: 150px;
  border: 2px solid #ccc;
  padding: 10px;
}

Sets size and appearance.

Prevent Resize:

textarea {
  resize: none;
}

Stops users from changing size.

Add Focus and Hover Effects

textarea:focus {
  border-color: blue;
  outline: none;
}

textarea:hover {
  border-color: green;
}

Improves user experience by showing clear states.

Wrapping Up

In this article, you learned what the <textarea> tag is and how to use its attributes. You also saw examples and style tips.

Here is a quick recap:

• The <textarea> tag creates multi-line input fields.
• It uses rows and cols to set size.
• Attributes like placeholder, readonly, disabled, and wrap give control.
• It suits long messages while <input type="text"> works for short entries.
• CSS and JavaScript help style and enhance textareas.

FAQs

textarea {
  resize: none;
}

Similar Reads