It is used to represent a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
The content is entered between the opening and closing tags. <textarea> does not support the value attribute.
It can hold an unlimited number of characters and its size is specified by the <cols> and <rows> attributes (or with CSS).
autocomplete
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.
autofocus
This Boolean attribute lets you specify that a form control should have input focus when the page loads. 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.
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 when the disabled attribute is set, the control is enabled.
form
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 form elements.
maxlength
The maximum number of characters (UTF-16 code units) that the user can enter. If this value isn't specified, the user can enter an unlimited number of characters.
minlength
The minimum number of characters (UTF-16 code units) required that the user should enter.
name
The name of the control.
placeholder
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.
Placeholders should only be used to show an example of the type of data that should be entered into a form; they are not a substitute for a proper <label> element tied to the input.
readonly
This Boolean attribute indicates that the user cannot modify the value of the control. Unlike the disabled attribute, the readonly 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
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.
spellcheck
Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS. The value can be:
- true: Indicates that the element needs to have its spelling and grammar checked.
-
default: Indicates that the element acts according to a default behavior, possibly based on the parent element's own
spellcheckvalue. - false: Indicates that the element should not be spell checked.
wrap
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; the
colsattribute must also be specified for this to take effect. - 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. This is the default value.
In most browsers, <textarea>s are resizable — you'll notice the drag handle in the right hand corner, which can be used to alter the size of the element on the page. This is controlled by the resize CSS property — resizing is enabled by default, but you can explicitly disable it using a resize value of none:
textarea {
resize: none;
}
Valid and invalid values of a <textarea> element (e.g. those within, and outside the bounds set by minlength, maxlength or required) can be highlighted using the :valid and :invalid pseudo-classes.
- Type: inline-block
- Self-closing: No
- Semantic value: No
Top comments (0)