HTML - <textarea>

The HTML <textarea> element represents a multi-line plain-text editing control.

Example

 

HTML Content

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

HTML
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 is applied to disabled <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

Element Forms HTML HTML forms Reference Web