<textarea>

Overview

The <textarea> element functions as a multi-line text editing control, enabling users to both input and edit significant amounts of plain text. This element is commonly used in forms where more elaborate user input is needed, such as in feedback forms, reviews, and other similar use cases.

Examples and Usage

The element is highly adaptable, and suitable for a wide range of text input scenarios—from simple comments in a feedback form to more elaborate inputs like emails in a webmail interface. A variety of attributes allow for fine-grained control over its behavior.

Fundamental Example

In this section, we'll focus on the name, rows, and cols attributes. The name attribute is essential for identifying the textarea during form submission, while rows and cols determine its visible dimensions.

<textarea name="comments" rows="5" cols="40"></textarea>

This setup results in a textarea displaying 5 lines of text, each expected to hold approximately 40 characters as a guideline. Since no text is provided between the opening and closing <textarea> tags, the textarea will initially appear empty to the user. Note that the actual number of characters that fit on a line may vary due to factors like font size, padding, and browser-specific rendering behavior.

Guiding with Placeholder

You can guide the user by providing a placeholder attribute, which will appear as faint text within the textarea until the user starts typing.

<textarea name="feedback" rows="5" cols="40" placeholder="Enter your feedback here"></textarea>

While placeholders provide useful cues, they vanish when the user starts typing. Therefore, they should not replace a <label> element, which offers persistent visibility and aids in accessibility.

Controlling Text Length

Using the minlength and maxlength attributes, you can control the amount of text a user can enter.

<textarea name="shortReview" rows="5" cols="40" minlength="50" maxlength="200"></textarea>

The textarea will require at least 50 characters to be considered valid but will not allow more than 200. Note that if minlength is set, an empty <textarea> is still considered valid unless the required attribute is also set.

Read-only and Disabled

Textareas can be made read-only or disabled using the readonly and disabled attributes, respectively.

<textarea name="readOnlyExample" rows="5" cols="40" readonly>This is a read-only textarea.</textarea>
<textarea name="disabledExample" rows="5" cols="40" disabled>This is a disabled textarea.</textarea>

A read-only textarea allows the text to be selected but not edited, whereas a disabled textarea cannot be interacted with at all. Importantly, the value of a read-only textarea is submitted with the form, while a disabled textarea's value is not.

Our examples have primarily showcased standalone <textarea> elements. However, in real-world applications, <textarea> often exists within a <form> element, associated with <label> and <input> elements for accessibility and better user experience. Such setups can also include client-side JavaScript for more dynamic behaviors like real-time validation, auto-expanding text areas as the user types, or even character counters.

Attribute Breakdown

In addition to global attributes, the <textarea> element comes with a set of specific attributes to customize its behavior.

Note: For more details, see the Additional Notes section below.

Accessibility Aspects

The <textarea> element is inherently accessible and understood by assistive technologies.

For detailed information on ARIA roles, states, and properties, refer to the official specification.

Associated Elements

• <button>
• <datalist>
• <fieldset>
• <form>
• <input>
• <label>
• <legend>
• <meter>
• <option>
• <optgroup>
• <output>
• <progress>
• <select>

Additional Notes

• The autocomplete attribute can be set to on or off, indicating whether the browser should suggest autofill options based on previous entries. If the attribute is not specified, the setting is inherited from the form owner.

• The cols attribute specifies the visible width of the textarea in average character widths. This value is not a strict limit but serves as a guideline for the browser. The actual number of characters that fit may vary due to factors like font size, padding, and browser-specific rendering behavior. The value must be a positive integer, and the default is 20.

• The disabled attribute is a Boolean that, when set, makes the textarea non-interactive. If not specified, the textarea inherits its disabled state from parent elements like <fieldset>.

• If the form attribute isn't specified, the textarea must be a descendant of a <form> element.

• The maxlength attribute limits the input to a specified maximum length, measured in UTF-16 code units. If omitted, there is no character limit.

• The minlength attribute sets a minimum character length for the textarea content for the form to be valid, also measured in UTF-16 code units.

• The name attribute is essential for identifying the textarea during form submission and can be accessed via the form.elements API in JavaScript.

• The readonly attribute is a Boolean that allows the text to be selected but not edited. The content is still submitted with the form.

• The required attribute is another Boolean that indicates the textarea must be filled out for the form to be submitted. It is often used in conjunction with client-side validation scripts.

• The rows attribute sets the visible height of the textarea in lines of text. It must be a positive integer and has a default value of 2.

• The wrap attribute controls how the text wraps when the form is submitted. It can be set to soft, hard, or off (non-standard). The default value is soft.

• By default, textareas are resizable. It's recommended to at least allow vertical resizing by setting the CSS resize property to vertical for a better user experience.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: textarea

The HTML Living Standard Specification: textarea