HTML <textarea> Element
The HTML <textarea>
tag represents a multiline plain text edit control in an HTML <form>
.
Often referred to as a text box
, comment box
, or even scroll box
, a <textarea>
element is a control that allows the user to input text over multiple rows.
The basic tag is written like this <textarea>
</textarea>
with any contents inserted between the opening and closing tags.
In HTML5 (as well as the WHATWG HTML Living Standard), the maxlength
attribute enables you to specify a maximum length for your <textarea>
element. This attribute was not supported in previous versions of HTML.
Here's an example of a text area:
That was done using the following code:
<textarea rows="3" cols="20"> Enter your text here... </textarea>
Attributes
The <textarea>
element accepts the following attributes.
Local Attributes
The following attributes are defined in the <textarea>
element's specification.
Attribute | Description |
---|---|
autocomplete | Hints to the browser whether or not an "autocomplete" feature should be provided for the user. An "autocomplete" feature assists users with filling out forms, like for example, prefilling address details (based on earlier input). The autocomplete attribute should have a value of off for fields with sensitive data.
Possible values:
The default value is Note that, if the |
autofocus | Automatically 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 Possible values:
|
disabled | Disables 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 Possible values:
|
dirname | Determines 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 .
|
form | Specifies the ID of a form to which this control belongs.
Possible values: [The ID of a form element in the element's owner |
maxlength | Specifies the maximum number of characters that the user is allowed to enter into the textarea control. |
minlength | Specifies the minimum number of characters that the user is allowed to enter into the textarea control. |
name | Assigns a name to the input control. |
placeholder | Provides 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. |
readonly | Sets 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 Possible values:
|
required | Specifies 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 Possible values:
|
rows | Specifies 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. |
cols | Specifies 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. |
wrap | Specifies how the text in the <textarea> should wrap to the next line.
Possible values:
|
Global Attributes
The <textarea>
element accepts the following global attributes. These attributes are standard across all HTML 5 elements.
Attribute | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
accesskey | Specifies a shortcut key that can be used to access this <textarea> element.
Possible values. [Any string of characters. This string of characters specifies the key/s the user needs to use in order to access the element.] |
||||||||||||
class | This is a document wide identifier. It is used to refer to a class that is specified in the style sheet. The value should match the name of the class you wish to use. | ||||||||||||
contenteditable | This attribute specifies whether the user can edit the content or not.
Possible values:
|
||||||||||||
contextmenu | The contextmenu attribute sets a context menu for an element. The value must be the ID of a menu element in the DOM. |
||||||||||||
dir | Specifies the direction of the text.
Possible values:
|
||||||||||||
draggable | Specifies whether the user is allowed to drag this <textarea> element or not.
Possible values:
|
||||||||||||
dropzone | The dropzone attribute specifies what should happen when the user "drops" an element (i.e. after dragging it) onto this <textarea> element.
Must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. Possible values:
Note that this attribute must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied. |
||||||||||||
hidden | Indicates that this particular 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 Possible values:
|
||||||||||||
id | The id attribute is a document wide identifier, which is used in conjunction with CSS and JavaScript. The value must match the name of the id you wish to use.
|
||||||||||||
itemid | The itemid provides a global identifier for an "item". This attribute is optional, however if it is provided, it must have a value that is a valid URL potentially surrounded by spaces.
The |
||||||||||||
itemprop | This attribute provides one or more properties to one or more "items".
Although this attribute is optional, if used it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute's value must have at least one token. Each token must be one of the following:
Also, |
||||||||||||
itemref | This attribute is used in conjunction with the |
||||||||||||
itemscope | HTML5 elements that have the itemscope attribute create a name-value pair called an "item". Elements with an itemscope attribute may also have an itemtype attribute specified, to give the item types of the item.
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 Possible values:
|
||||||||||||
itemtype | This attribute provides an item type for elements containing the itemscope attribute. The attribute is optional but if it is specified, it must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute's value must have at least one token.
The |
||||||||||||
lang | Sets the language code to be used.
Possible values: [Must be a valid RFC 3066 language code, or an empty string.] |
||||||||||||
spellcheck | Specifies whether the element should have its spelling checked.
If this attribute is missing, the element will use the default behavior, possibly based on the parent's own |
||||||||||||
style | Specifies inline styles for this <textarea> element. This allows you to define the styles within the page, and within this <textarea> tag, as opposed to referring to styles defined elsewhere (such as an external style sheet). Although this can be useful for over-riding external styles, it is usually preferrable to use external styles in conjunction with the class attribute and/or the id attribute.
|
||||||||||||
tabindex | Helps determine the tabbing order for the element (for when the user uses the "tab" key on their keyboard to "tab" through the elements on the page in order to select an element).
Possible values: [Any valid integer. For example, 0, 1, 2, 3, ...etc] |
||||||||||||
title | Specifies a title to associate with this particular <textarea> element. Many browsers will display this when the cursor hovers over the element (similar to a "tool tip").
Possible values: [Any text to be displayed as a "tool tip".] |
||||||||||||
translate | Determines whether the element's attribute values and the values of its Text node children are to be translated when the page is localized, or whether to leave them unchanged.
The
If the |
Event Handlers
This element also accepts various event handlers. Event handlers are commonly used to extend the functionality of an HTML element.
For a list of event handlers that you can use with this element, see Event handlers on elements, Document objects, and Window objects at the W3C website.
More Information About the <textarea>
Element
Content Categories |
|
---|---|
Can be used | Where phrasing content is expected. |
Content model | Text. |
End Tag Required? | Yes. Any time you use the <textarea> element, it must have both a start tag and an end tag.
|
DOM Interface | HTMLTextAreaElement |
Specifications for the <textarea>
Element
Here is the <textarea>
element defined in the various specifications:
- W3C (HTML5)
- WHATWG (HTML Living Standard)
- W3C HTML 4.01 Specification (previous version of HTML)