HTML <textarea> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <textarea> element in HTML represents a multi-line plain-text editing control. Unlike the <input> element with type="text", which is typically used for single-line input, <textarea> is designed to allow users to enter, edit, and manipulate multiple lines of text. It is commonly used in forms where longer user input is expected, such as comments, messages, descriptions, or feedback.

A key feature of <textarea> is that its content can span several lines, giving users more flexibility and space to provide input. The text entered inside a <textarea> can be wrapped, scrolled, and styled just like any other block of text, making it versatile for different interface designs. By default, the <textarea> displays a rectangular area with a visible border and an optional scrollbar if the content exceeds its visible size.

The <textarea> element is a container tag, meaning it has an opening and closing tag. Any default text placed between the opening <textarea> and closing </textarea> tags appears inside the editable area when the page loads. This default content can be pre-filled with instructions, placeholder text, or initial user data.

From a user interaction perspective, <textarea> supports standard text editing capabilities such as typing, copying, cutting, pasting, and selecting text. It can also be navigated with the keyboard, including using the Tab key to move focus in forms or arrow keys to navigate within the text.

Because <textarea> allows multi-line input, it can grow to accommodate large amounts of text, making it ideal for applications like blog comment sections, email drafts, search queries with multiple lines, and code editors in the browser.

Properties

Permitted Parents: Any element that accepts phrasing content
Content: Text
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<textarea cols="40">

You can write whatever text you want in the textarea.

</textarea>

Result

Editor

Attributes

autofocus: Specifies that a text area should automatically get focus when the page loads.
cols: Specifies the width of the textarea based on the number of visible character widths.
dirname: Specifies that the text direction of the textarea will be submitted.
disabled: Disables the input control. The button won't accept changes from the user. It also cannot receive focus and will be skipped when tabbing.
form: Specifies one or more forms the text area belongs to.
maxlength: Specifies the maximum number of characters allowed in the text area.
name: Assigns a name to the input control.
placeholder: Specifies a short hint that describes the expected value of a text area.
readonly: Sets the textarea to read-only – it won't allow the user to change the value. The textarea, however, can receive focus and is included when tabbing through the form controls.
required: Specifies that a text area is required/must be filled out.
rows: Specifies the height of the textarea based on the number of visible lines of text. If there is more text than this allows, users can scroll using the textarea's scrollbars.
wrap: Specifies how the text in a text area is to be wrapped when submitted in a form.

Global Attributes

The <textarea> tag also supports the Global Attributes in HTML5

Event Attributes

The <textarea> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <textarea> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.