HTML <textarea> element

The <textarea> element provides a control for entering several lines of plain text, such as a comment, message, or description. The user can enter line breaks, and text can also wrap to fit the available width.

The starting text is placed between the opening and closing tags. There is no HTML value attribute for this element. Its current contents can be read or changed through the JavaScript value property. The name attribute identifies the text when the associated form is submitted.

The rows attribute specifies the number of visible text lines, while cols gives an approximate width in character columns. These describe the control's display size, not the amount of text that may be entered. CSS width and height can override this sizing. The CSS resize property controls whether the user can resize the box and in which directions.

The wrap attribute affects the submitted text. Its default value, soft, allows text to wrap on screen without inserting extra line breaks into the submitted value. Line breaks entered by the user are retained. With wrap="hard", the browser adds line breaks to the submitted text to wrap it to the specified number of columns; this requires a cols attribute.

The minlength and maxlength attributes set length constraints, while required makes an empty control fail the browser's form validation. The disabled attribute prevents interaction and excludes the value from submission. A readonly textarea prevents editing but can still receive focus and have its value submitted.

An associated <label> identifies the control's purpose. It can enclose the textarea or use for to refer to the textarea's id. A placeholder supplies a short hint while the control is empty, and does not replace this label. If the textarea is outside its form, the form attribute can associate it with that form's id.

Whitespace between the tags can become part of the starting text. In HTML, one newline immediately after the opening tag is stripped, but indentation spaces and later newlines are retained. Start the text directly after the opening tag when you do not want extra whitespace.

Attributes: name, rows, cols, wrap, minlength, maxlength, placeholder, required, disabled, readonly, form, autocomplete, dirname, GLOBALS.

Typical layout:
<label for="pf-demo-msg">Message</label><br>
<textarea id="pf-demo-msg" name="msg" rows="3"
  maxlength="500" style="width:100%; font-family:inherit;">Please send more information.</textarea>

Visual representation: