Web.QHMIT.com

HTML 5 <textarea> Tag

The HTML <textarea> tag is used within a form to declare a textarea element - a control that allows the user to input text over multiple rows.

In HTML 5, the maxlength attribute enables you to specify a maximum length for your <textarea> element. This attribute was not supported in previous versions of HTML.

Also see the <form> tag.

Example

Here's an example of a <textarea> element.

Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign, with the value surrounded by double quotes. Here's an example, style="color:black;".

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The attributes that you can add to this tag are listed below.

Element-Specific Attributes

The following table shows the attributes that are specific to this tag/element.

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 5 tags.

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

Event Handler Content Attributes

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.

Here are the standard HTML 5 event handler content attributes.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Related