← 4.10.12 The option elementTable of contents4.10.14 The keygen element →

4.10.13 The textarea element

Categories:
Flow content.
Phrasing content.
Interactive content.
Listed, labelable, submittable, and resettable form-associated element.
Palpable content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Text.
Content attributes:
Global attributes
autofocus
cols
dirname
disabled
form
maxlength
name
placeholder
readonly
required
rows
wrap
DOM interface:
interface HTMLTextAreaElement : HTMLElement {
           attribute boolean autofocus;
           attribute unsigned long cols;
           attribute DOMString dirName;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
           attribute long maxLength;
           attribute DOMString name;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long rows;
           attribute DOMString wrap;

  readonly attribute DOMString type;
           attribute DOMString defaultValue;
           attribute DOMString value;
  readonly attribute unsigned long textLength;

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
           attribute DOMString selectionDirection;

  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};

The textarea element represents a multiline plain text edit control . The contents of the control represent the control's default value.

The readonly attribute is a boolean attribute used to control whether the text can be edited by the user or not.

In this example, a text field is marked read-only because it represents a read-only file:

Filename: <code>/etc/bash.bashrc</code>
<textarea name="buffer" readonly>
# System-wide .bashrc file for interactive bash(1) shells.

# To enable the settings / commands in this file for login shells as well,
# this file has to be sourced in /etc/profile.

# If not running interactively, don't do anything
[ -z "$PS1" ] &amp;&amp; return

...</textarea>

The cols attribute specifies the expected maximum number of characters per line. If the cols attribute is specified, its value must be a valid non-negative integer greater than zero.

The rows attribute specifies the number of lines to show. If the rows attribute is specified, its value must be a valid non-negative integer greater than zero.

The wrap attribute is an enumerated attribute with two keywords and states: the soft keyword which maps to the Soft state, and the hard keyword which maps to the Hard state. The missing value default is the Soft state.

The Soft state indicates that the text in the textarea is not to be wrapped when it is submitted (though it can still be wrapped in the rendering).

The Hard state indicates that the text in the textarea is to have newlines added by the user agent so that the text is wrapped when it is submitted.

If the element's wrap attribute is in the Hard state, the cols attribute must be specified.

The maxlength attribute is a form control maxlength attribute controlled by the textarea element's dirty value flag.

If the textarea element has a maximum allowed value length, then the element's children must be such that the code-unit length of the value of the element's textContent IDL attribute is equal to or less than the element's maximum allowed value length.

The required attribute is a boolean attribute. When specified, the user will be required to enter a value before submitting the form.

The placeholder attribute represents a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. The attribute, if specified, must have a value that contains no "LF" (U+000A) or "CR" (U+000D) characters.

The placeholder attribute should not be used as an alternative to a label. For a longer hint or other advisory text, the title attribute is more appropriate.

These mechanisms are very similar but subtly different: the hint given by the control's label is shown at all times; the short hint given in the placeholder attribute is shown before the user enters a value; and the hint in the title attribute is shown when the user requests further help.

The dirname attribute is a form control dirname attribute.

The form attribute is used to explicitly associate the textarea element with its form owner. The name attribute represents the element's name. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The autofocus attribute controls focus.

textarea . type

Returns the string "textarea".

textarea . value

Returns the current value of the element.

Can be set, to change the value.

Here is an example of a textarea being used for unrestricted free-form text input in a form:

<p>If you have any comments, please let us know: <textarea cols=80 name=comments></textarea></p>

To specify a maximum length for the comments, one can use the maxlength attribute:

<p>If you have any short comments, please let us know: <textarea cols=80 name=comments maxlength=200></textarea></p>

To give a default value, text can be included inside the element:

<p>If you have any comments, please let us know: <textarea cols=80 name=comments>You rock!</textarea></p>

To have the browser submit the directionality of the element along with the value, the dirname attribute can be specified:

<p>If you have any comments, please let us know (you may use either English or Hebrew for your comments):
<textarea cols=80 name=comments dirname=comments.dir></textarea></p>