The HTML <textarea>
element represents a multi-line plain-text editing control.
Content categories | Flow content, phrasing content, Interactive content, listed, labelable, resettable, and submittable form-associated element. |
---|---|
Permitted content | Text |
Tag omission | None, both the starting and ending tag are mandatory. |
Permitted parents | Any element that accepts phrasing content. |
Permitted ARIA roles | None |
DOM interface | HTMLTextAreaElement |
Attributes
This element includes the global attributes.
autocapitalize
- This is a nonstandard attribute supported by WebKit on iOS (therefore nearly all browsers running on iOS, including Safari, Firefox, and Chrome) which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are:
none
: Completely disables automatic capitalizationsentences
: Automatically capitalize the first letter of sentences.words
: Automatically capitalize the first letter of words.characters
: Automatically capitalize all characters.on
: Deprecated since iOS 5.off
: Deprecated since iOS 5.
autocomplete
HTML5- This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are:
off
: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.on
: The browser can automatically complete the value based on values that the user has entered during previous uses.
If the autocomplete attribute is not specified on a
<textarea>
element, then the browser uses the autocomplete attribute value of the<textarea>
element's form owner. The form owner is either the<form>
element that this<textarea>
element is a descendant of or the form element whose id is specified by the form attribute of the input element. For more information, see theautocomplete
attribute in<form>
. autofocus
HTML5- This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.
cols
- The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is
20
(HTML5). disabled
- This Boolean attribute indicates that the user cannot interact with the control. (If this attribute is not specified, the control inherits its setting from the containing element, for example
<fieldset>
; if there is no containing element with thedisabled
attribute set, then the control is enabled.) form
HTML5- The form element that the
<textarea>
element is associated with (its "form owner"). The value of the attribute must be the ID of a form element in the same document. If this attribute is not specified, the<textarea>
element must be a descendant of a form element. This attribute enables you to place<textarea>
elements anywhere within a document, not just as descendants of their form elements. maxlength
HTML5- The maximum number of characters (Unicode code points) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.
minlength
HTML5- The minimum number of characters (Unicode code points) required that the user should enter.
name
- The name of the control.
placeholder
HTML5- A hint to the user of what can be entered in the control. Carriage returns or line-feeds within the placeholder text must be treated as line breaks when rendering the hint.
readonly
- This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the
disabled
attribute, thereadonly
attribute does not prevent the user from clicking or selecting in the control. The value of a read-only control is still submitted with the form. required
HTML5- This attribute specifies that the user must fill in a value before submitting a form.
rows
- The number of visible text lines for the control.
selectionDirection
HTML5- The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.
selectionEnd
- The index to the last character in the current selection. If there's no selection, the value is the index of the character following the position of the text entry cursor.
selectionStart
- The index to the first character in the current selection. If there's no selection, this value is the index of the character following the position of the text entry cursor.
spellcheck
HTML5- Setting the value of this attribute to
true
indicates that the element needs to have its spelling and grammar checked. The valuedefault
indicates that the element is to act according to a default behavior, possibly based on the parent element's ownspellcheck
value. The valuefalse
indicates that the element should not be checked. wrap
HTML5- Indicates how the control wraps text. Possible values are:
hard
: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; thecols
attribute must be specified.soft
: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.off
: Likesoft
but changes appearance towhite-space: pre
so line segments exceedingcols
are not wrapped and area becomes horizontally scrollable.
If this attribute is not specified,
soft
is its default value.
Resizable textareas
Requires Gecko 2.0(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)Gecko 2.0 introduced support for resizable textareas. This is controlled by the resize
CSS property. Resizing of textareas is enabled by default, but you can explicitly disable it by including the following CSS:
textarea { resize: none; }
Interaction with CSS
In regards to CSS, an <textarea>
is a replaced element. The HTML specification doesn't define where the baseline of a <textarea>
is. So different browsers set it to different positions. For Gecko, the <textarea>
baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <textarea>
box. Don't use vertical-align
: baseline
on it, as the behavior will be unpredictable.
A textarea has intrinsic dimensions, like a raster image.
Example
HTML content
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
Specifications
Specification | Status | Comment |
---|---|---|
WHATWG HTML Living Standard The definition of '<textarea>' in that specification. |
Living Standard | |
HTML5 The definition of '<textarea>' in that specification. |
Recommendation | |
HTML 4.01 Specification The definition of '<textarea>' in that specification. |
Recommendation |
Browser Compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) |
1.0 (1.7 or earlier)[2] 6.0 (6.0)[3] |
(Yes) | (Yes) | (Yes) |
autocomplete attribute |
No support | No support | No support | No support | No support | No support |
autofocus attribute |
(Yes) | (Yes) | 4.0 (2.0) | 10 | (Yes) | (Yes) |
maxlength attribute |
(Yes) | (Yes) | 4.0 (2.0) | 10 | (Yes) | (Yes) |
placeholder attribute |
(Yes) | (Yes) | 4.0 (2.0) | 10 | 11.50 | 5.0 |
Line breaks in placeholder |
36 | (Yes) | No support (see bug 1312897) |
10 | ? | No support |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 1.0 (1.0)[2] 6.0 (6.0)[3] |
(Yes) | (Yes) | (Yes) [1] |
autofocus attribute |
? | No support | 4.0 (2.0) | No support | ? | ? |
autocomplete attribute |
No support | (Yes) | No support | No support | No support | No support |
maxlength attribute |
? | (Yes) | 4.0 (2.0) | No support | ? | ? |
placeholder attribute |
? | (Yes) | 4.0 (2.0) | ? | 11.50 | 4.0 |
Line breaks in placeholder |
? | (Yes) | No support | ? | ? | No support |
[1] Unlike other major browsers, a default style of
is applied to disabled opacity
: 0.4<textarea>
elements.
[2] Before Gecko 6.0 (Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3), when a <textarea>
is focused, the insertion point was placed at the end of the text by default. Other major browsers place the insertion point at the beginning of the text.
[3] A default background-image
gradient is applied to all <textarea>
elements, which can be disabled using background-image: none
.
See also
Other form-related elements: <form>
, <button>
, <datalist>
, <legend>
, <label>
, <select>
, <optgroup>
, <option>
, <input>
, <keygen>
, <fieldset>
, <output>
, <progress>
and <meter>
.