HTML - <textarea>
The HTML <textarea> element represents a multi-line plain-text editing control.
Example
HTML Content
<textarea name="textarea" rows="10" cols="50">Write something here</textarea>
Description
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 | Character data |
| Tag omission | None, both the starting and ending tag are mandatory. |
| Permitted parent elements | Any element that accepts phrasing content. |
| DOM interface | HTMLTextAreaElement |
See Also
Other form-related elements: <form>, <button>, <datalist>, <legend>, <label>, <select>, <optgroup>, <option>, <input>, <keygen>, <fieldset>, <output>, <progress> and <meter>.
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 |
DOM interface
This element implements the HTMLTextAreaElement interface.
Resizable textareas
(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.
Browser Compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | (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 |
autofocus attribute |
(Yes) | 4.0 (2.0) | 10 | (Yes) | (Yes) |
maxlength attribute |
(Yes) | 4.0 (2.0) | 10 | (Yes) | (Yes) |
placeholder attribute |
(Yes) | 4.0 (2.0) | 10 | 11.50 | 5.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | (Yes) | 1.0 (1.0)[2] 6.0 (6.0)[3] |
(Yes) | (Yes) | (Yes) [1] |
autofocus attribute |
? | 4.0 (2.0) | No support | ? | ? |
autocomplete attribute |
No support | No support | No support | No support | No support |
maxlength attribute |
? | 4.0 (2.0) | No support | ? | ? |
placeholder attribute |
? | 4.0 (2.0) | ? | 11.50 | 4.0 |
[1] Unlike other major browsers, a default style of 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.
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/html/element/textarea