HTML tags | textarea
Tags: html, tags, textarea
Published: 2021-11-03 07:27:31

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 `spellcheck` value.
* **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 `cols` attribute 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*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) | [Support](https://caniuse.com/mdn-html_elements_textarea)