HTML <textarea> Tag

The HTML <textarea> tag represents a multiline plain text edit control for the element's raw value.

This tag enables users to enter text across multiple lines. Therefore, they can submit larger blocks of text than could be acheived with a simple <input> element.

Syntax

The <textarea> tag is written as <textarea></textarea> with any contents inserted between the start and end tags.

You can use the rows and/or cols attribute to specify how many rows and columns should show.

Like this:

Examples

Basic tag usage

The minlength & maxlength Attributes

In HTML 5, the minlength & maxlength attributes enable you to specify a minimum and/or maximum length for your <textarea> element. These attributes are not supported in previous versions of HTML.

Submitting a Form

There are two ways to associate the <textarea> element with a <form> element.

Nested Element

The <textarea> element can be nested within a <form> element so that the contents of the <textarea> (and any other controls) are submitted to the page that processes the form.

The form Attribute

Alternatively, you can use the form attribute to associate the <textarea> element with a <form> element.

To associate a control with a form, the form attribute on the control must correspond with the id attribute on the <form> element.

In this example, the <textarea> element is located outside of the <form> element. Normally this would prevent the <textarea> element's contents from being submitted with the form. However, by using the form attribute, we can associate the <textarea> element with the form.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <textarea> element accepts the following attributes.

AttributeDescription
autocompleteSpecifies whether the form fields should be automatically completed based on the user's history (i.e. based on previous forms that the user has completed). This relieves the user from having to re-enter form data that could easily be re-populated from previous form history (such as address information). The autocomplete attribute is an enumerated attribute which has two states; "on" and "off". The default value is "on".

Note that, if the autocomplete feature is not specified on this element, the browser will use any value specified by the element's form owner (i.e. either the <form> element that this element has descended from, or the <form> element that this element has specified in its form attribute).

autofocusAutomatically gives focus to this control when the page loads. This allows the user to start using the control without having to select it first. There must not be more than one element in the document with the autofocus attribute specified.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either autofocus or autofocus="autofocus").

Possible values:

  • [Empty string]
  • autofocus
disabledDisables the control. The control won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either disabled or disabled="disabled").

Possible values:

  • [Empty string]
  • disabled
dirnameDetermines the direction of the text as submitted in the textarea field. The value of this attribute can be a string of text such as a name for the field. For example, if you specify the attribute as dirname="text_dir", once the form has been submitted, the data might look like this: text_dir=ltr.

formSpecifies the ID of a form to which this control belongs.

Possible values:

[The ID of a form element in the element's owner Document]

maxlengthSpecifies the maximum number of characters that the user is allowed to enter into the textarea control.
minlengthSpecifies the minimum number of characters that the user is allowed to enter into the textarea control.
nameAssigns a name to the input control.
placeholderProvides a hint to the user to help them complete the textarea. For example, this could be sample text or a description of the expected format.
readonlySets the input control to read-only - it won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls.

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either readonly or readonly="readonly").

Possible values:

  • [Empty string]
  • readonly
requiredSpecifies that the input field is a required field (the user must complete this field).

This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either required or required="required").

Possible values:

  • [Empty string]
  • required
rowsSpecifies the height of the <textarea> based on the number of visible lines of text. If there's more text than this allows, users can scroll using the textarea's scrollbars. The value must be a non-negative integer greater than zero (i.e. a number). The default value is 2.
colsSpecifies the width of the <textarea> based on the number of visible character widths. The value must be a non-negative integer greater than zero (i.e. a number). The default value is 20.
wrapSpecifies how the text in the <textarea> should wrap to the next line.

Possible values:

  • soft
  • hard (this value can only be used if the cols attribute is used)

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <textarea> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.