HTML <textarea> Tag

The HTML <textarea> tag represents a multiline plain text edit control for the element's raw value.

This tag enables users to enter text across multiple lines. Therefore, they can submit larger blocks of text than could be acheived with a simple <input> element.

Syntax

The <textarea> tag is written as <textarea></textarea> with any contents inserted between the start and end tags.

You can use the rows and/or cols attribute to specify how many rows and columns should show.

Like this:

Examples

Basic tag usage

The `minlength` & `maxlength` Attributes

In HTML 5, the minlength & maxlength attributes enable you to specify a minimum and/or maximum length for your <textarea> element. These attributes are not supported in previous versions of HTML.

Submitting a Form

There are two ways to associate the <textarea> element with a <form> element.

Nested Element

The <textarea> element can be nested within a <form> element so that the contents of the <textarea> (and any other controls) are submitted to the page that processes the form.

The `form` Attribute

Alternatively, you can use the form attribute to associate the <textarea> element with a <form> element.

To associate a control with a form, the form attribute on the control must correspond with the id attribute on the <form> element.

In this example, the <textarea> element is located outside of the <form> element. Normally this would prevent the <textarea> element's contents from being submitted with the form. However, by using the form attribute, we can associate the <textarea> element with the form.

Attributes

Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

The <textarea> element accepts the following attributes.

Attribute	Description
`autocomplete`	Specifies whether the form fields should be automatically completed based on the user's history (i.e. based on previous forms that the user has completed). This relieves the user from having to re-enter form data that could easily be re-populated from previous form history (such as address information). The autocomplete attribute is an enumerated attribute which has two states; "on" and "off". The default value is "on". Note that, if the `autocomplete` feature is not specified on this element, the browser will use any value specified by the element's form owner (i.e. either the `<form>` element that this element has descended from, or the `<form>` element that this element has specified in its `form` attribute).
`autofocus`	Automatically gives focus to this control when the page loads. This allows the user to start using the control without having to select it first. There must not be more than one element in the document with the autofocus attribute specified. This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either `autofocus` or `autofocus="autofocus"`). Possible values: [Empty string] `autofocus`
`disabled`	Disables the control. The control won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing. This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either `disabled` or `disabled="disabled"`). Possible values: [Empty string] `disabled`
`dirname`	Determines the direction of the text as submitted in the `textarea` field. The value of this attribute can be a string of text such as a name for the field. For example, if you specify the attribute as `dirname="text_dir"`, once the form has been submitted, the data might look like this: `text_dir=ltr`.
`form`	Specifies the ID of a form to which this control belongs. Possible values: [The ID of a form element in the element's owner `Document`]
`maxlength`	Specifies the maximum number of characters that the user is allowed to enter into the textarea control.
`minlength`	Specifies the minimum number of characters that the user is allowed to enter into the textarea control.
`name`	Assigns a name to the input control.
`placeholder`	Provides a hint to the user to help them complete the textarea. For example, this could be sample text or a description of the expected format.
`readonly`	Sets the input control to read-only - it won't allow the user to change the value. The control however, can receive focus and are included when tabbing through the form controls. This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either `readonly` or `readonly="readonly"`). Possible values: [Empty string] `readonly`
`required`	Specifies that the input field is a required field (the user must complete this field). This is a boolean attribute. If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace (i.e. either `required` or `required="required"`). Possible values: [Empty string] `required`
`rows`	Specifies the height of the `<textarea>` based on the number of visible lines of text. If there's more text than this allows, users can scroll using the textarea's scrollbars. The value must be a non-negative integer greater than zero (i.e. a number). The default value is 2.
`cols`	Specifies the width of the `<textarea>` based on the number of visible character widths. The value must be a non-negative integer greater than zero (i.e. a number). The default value is 20.
`wrap`	Specifies how the text in the `<textarea>` should wrap to the next line. Possible values: `soft` `hard` (this value can only be used if the `cols` attribute is used)

Global Attributes

The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <textarea> tag , as well as with all other HTML tags.

accesskey
autocapitalize
class
contenteditable
data-*
dir
draggable
hidden
id
inputmode
is
itemid
itemprop
itemref
itemscope
itemtype
lang
part
slot
spellcheck
style
tabindex
title
translate

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handlers

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

onabort
onauxclick
onblur
oncancel
oncanplay
oncanplaythrough
onchange
onclick
onclose
oncontextmenu
oncopy
oncuechange
oncut
ondblclick
ondrag
ondragend
ondragenter
ondragexit
ondragleave
ondragover
ondragstart
ondrop
ondurationchange
onemptied
onended
onerror
onfocus
onformdata
oninput
oninvalid
onkeydown
onkeypress
onkeyup
onlanguagechange
onload
onloadeddata
onloadedmetadata
onloadstart
onmousedown
onmouseenter
onmouseleave
onmousemove
onmouseout
onmouseover
onmouseup
onpaste
onpause
onplay
onplaying
onprogress
onratechange
onreset
onresize
onscroll
onsecuritypolicyviolation
onseeked
onseeking
onselect
onslotchange
onstalled
onsubmit
onsuspend
ontimeupdate
ontoggle
onvolumechange
onwaiting
onwheel

Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.

For more detail, see HTML event handler content attributes.