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.
HTML5 introduced a number of new attributes for the <textarea> element. These are listed below under "Differences Between HTML 4 & HTML 5".
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.
There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.
The <textarea> element accepts the following attributes.
Element-Specific Attributes
This table shows the attributes that are specific to the <textarea> tag/element.
| Attribute | Description |
|---|---|
| autocomplete | Specifies 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 |
| 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 following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <textarea> tag , as well as with all other HTML tags.
- accesskey
- class
- contenteditable
- contextmenu
- dir
- draggable
- dropzone
- hidden
- id
- inert
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- spellcheck
- style
- tabindex
- title
- translate
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.
Below are the standard HTML5 event handler content attributes.
Again, you can use any of these with the <textarea> element, as well as any other HTML5 element.
- onabort
- oncancel
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformchange
- onforminput
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreadystatechange
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- onvolumechange
- onwaiting
For a full explanation of these attributes, see HTML 5 event handler content attributes.
Differences Between HTML 4 & HTML 5
HTML5 introduced the following attributes:
autocompleteautofocusdirnameformmaxlengthminlengthplaceholderrequiredwrap
To see more detail on the two versions see HTML5 <textarea> Tag and HTML4 <textarea> Tag. Also check out the links to the official specifications below.
Template
Here's a template for the <textarea> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.
For more information on attributes for this tag, see HTML5 <textarea> Tag and HTML4 <textarea> Tag.
Tag Details
For more details about the <textarea> tag, see HTML5 <textarea> Tag and HTML4 <textarea> Tag.
Specifications
Here are the official specifications for the <textarea> element.
- HTML5 Specification (W3C)
- HTML Living Standard (WHATWG)
- Current W3C Draft (the next version that is currently being worked on)
- HTML 4 (W3C)
What's the Difference?
W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.