HTML Textarea

by

HTML textarea elements allow users to enter multiple lines of text into a web form. They are commonly used for comments, feedback, messages, reviews, descriptions, and contact forms. The <textarea> element is useful whenever users need more space to write than a single-line input field provides.

What Is an HTML Textarea?

An HTML textarea is a form control designed for multiline text input. Unlike a regular text field, it allows users to type longer messages and move to new lines.

For example, a contact form can use a textarea to let visitors describe their questions or explain an issue.

To understand other form controls, explore HTML Input and HTML Form Elements.

HTML Textarea Example

The following example demonstrates how to create a basic textarea.

<form>
  <label for="message">Your Message:</label>

  <textarea
    id="message"
    name="message"
    rows="5"
    cols="40"
    placeholder="Enter your message"
  ></textarea>

  <button type="submit">Send Message</button>
</form>

In this example:

  • <textarea> creates the multiline text field.
  • id="message" identifies the field.
  • name="message" specifies the field name submitted with the form.
  • rows="5" sets the initial visible height to approximately five lines.
  • cols="40" sets the approximate visible width.
  • placeholder displays a hint when the field is empty.

The browser may adjust the actual appearance according to its default styling and the page’s CSS.

Important Attributes of HTML Textarea

HTML textarea elements support several useful attributes.

  • rows specifies the number of visible text lines.
  • cols specifies the approximate number of visible characters per line.
  • placeholder displays a short hint.
  • maxlength limits the maximum number of characters.
  • minlength specifies the minimum number of characters.
  • required makes the field mandatory.
  • readonly allows users to read and copy the text but not edit it.
  • disabled prevents users from interacting with the field.

For example:

<label for="feedback">Your Feedback:</label>

<textarea
  id="feedback"
  name="feedback"
  rows="6"
  maxlength="500"
  placeholder="Write your feedback"
  required
></textarea>

This example requires users to enter feedback and limits the field to 500 characters.

Learn more about HTML Form Attributes and the HTML Required Attribute.

Setting a Default Textarea Value

You can provide an initial value by placing text between the opening and closing <textarea> tags.

<label for="comment">Comment:</label>

<textarea id="comment" name="comment" rows="4">Welcome to Web4Learners!</textarea>

The text appears inside the textarea when the page loads. Unlike an <input> element, a textarea uses its content rather than a value attribute to define its initial text.

Styling HTML Textarea with CSS

CSS can improve the appearance and usability of a textarea.

<style>
  textarea {
    width: 100%;
    max-width: 500px;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
  }

  textarea:focus {
    border-color: #007bff;
    outline: 2px solid #cce5ff;
  }
</style>

The width property controls the field’s width, while min-height establishes a minimum height. The focus style helps users identify the active field.

Controlling Textarea Resizing

Many browsers allow users to resize a textarea. You can control this behavior with the CSS resize property.

<style>
  textarea {
    resize: vertical;
  }
</style>

The vertical value allows users to change the height without changing the width. Use resize: none only when disabling resizing is appropriate for your design and usability requirements.

HTML Textarea vs Text Input

A textarea is designed for multiline content, such as reviews and messages. A text input is designed primarily for a single line, such as a username or short title.

Choose the element that best fits the information users need to enter.

Frequently Asked Questions

Can a textarea have a character limit?

Yes. Use the maxlength attribute to specify the maximum number of characters.

Can I make a textarea mandatory?

Yes. Add the required attribute to require a value before normal browser form submission.

How do I set the default textarea text?

Place the default text between the opening and closing <textarea> tags.

Can a textarea automatically grow as users type?

Yes. JavaScript can adjust its height based on its content. CSS can also control its minimum height and resizing behavior.