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:

<textarea rows="3" cols="20">
Enter your text here...
</textarea>

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.

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 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:

  • autocomplete
  • autofocus
  • dirname
  • form
  • maxlength
  • minlength
  • placeholder
  • required
  • wrap

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.

<textarea  
 autocomplete=""
 autofocus=""
 cols=""
 dirname=""
 disabled=""
 form=""
 maxlength=""
 minlength=""
 name=""
 placeholder=""
 readonly=""
 required=""
 rows=""
 wrap=""
 
 accesskey=""
 class=""
 contenteditable=""
 contextmenu=""
 dir=""
 draggable=""
 dropzone=""
 hidden=""
 id=""
 itemid=""
 itemprop=""
 itemref=""
 itemscope=""
 itemtype=""
 lang=""
 spellcheck=""
 style=""
 tabindex=""
 title=""
 translate=""

 onabort=""
 onautocomplete=""
 onautocompleteerror=""
 onblur=""
 oncancel=""
 oncanplay=""
 oncanplaythrough=""
 onchange=""
 onclick=""
 onclose=""
 oncontextmenu=""
 oncuechange=""
 ondblclick=""
 ondrag=""
 ondragend=""
 ondragenter=""
 ondragexit=""
 ondragleave=""
 ondragover=""
 ondragstart=""
 ondrop=""
 ondurationchange=""
 onemptied=""
 onended=""
 onerror=""
 onfocus=""
 oninput=""
 oninvalid=""
 onkeydown=""
 onkeypress=""
 onkeyup=""
 onload=""
 onloadeddata=""
 onloadedmetadata=""
 onloadstart=""
 onmousedown=""
 onmouseenter=""
 onmouseleave=""
 onmousemove=""
 onmouseout=""
 onmouseover=""
 onmouseup=""
 onmousewheel=""
 onpause=""
 onplay=""
 onplaying=""
 onprogress=""
 onratechange=""
 onreset=""
 onresize=""
 onscroll=""
 onseeked=""
 onseeking=""
 onselect=""
 onshow=""
 onsort=""
 onstalled=""
 onsubmit=""
 onsuspend=""
 ontimeupdate=""
 ontoggle=""
 onvolumechange=""
 onwaiting=""
	>
</textarea>

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.

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.