The <textarea> tag creates a multi-line text input control.
It accepts an unlimited number of characters. Textareas will create scrollbars when the text becomes too large.
Example
#
A <textarea> with 6 visible rows.
With more than 6
rows of text a scrollbar appears.
Using <textarea>
The <textarea> tag creates a multi-line text input control.
This element accepts an unlimited number of characters and line breaks.
By default, the textarea will create scrollbars when the text becomes too large.
The <textarea> element can be used for comments, reviews, addresses, and more.
Textareas honor spaces and line-breaks. They will format text as provided (see example below).
More Examples
A <textarea> with 12 rows and a 45 character row limit. The control has a scrollbar because the text exceeds 12 rows.
Textareas honor spaces and line-breaks. You can see this by how the text inside the textarea indents and wraps the same as specified in the HTML.
<textarea rows="12" cols="45"> Unlike most Dutch masters of the 17th century, Rembrandt's works depict a wide range of style and subject matter, from portraits and self-portraits to landscapes, genre scenes, allegorical and historical scenes, and biblical and mythological themes as well as animal studies. His contributions to art came in a period of great wealth and cultural achievement that historians call the Dutch Golden Age, when Dutch art (especially Dutch painting), although in many ways antithetical to the Baroque style that dominated Europe, was extremely prolific and innovative and gave rise to important new genres. Like many artists of the Dutch Golden Age, such as Jan Vermeer of Delft, Rembrandt was also an avid art collector and dealer. </textarea>Attributes for <textarea>
This table lists the <textarea> tag attributes.
id | identifier | Defines a unique identifier for the textarea. |
class | classnames | Sets one or more CSS classes to be applied to the textarea. |
style | CSS-styles | Sets the style for the textarea. |
data-* | value | Defines additional data that can be used by JavaScript. |
hidden | hidden | Specifies whether the textarea is hidden. |
title | text | Sets a title that displays as a tooltip. |
tabindex | index | Sets a tab sequence relative to the other elements. |
lang | language | Sets the language for the textarea. |
autocomplete | on | off | Presents the user with previously entered values |
autofocus | no value | Sets the focus on the specified textarea when the page loads |
cols | number | Textarea width |
dirname | textareaname.dir | Text direction of the textarea |
disabled | disabled | Disables textarea |
form | form-id | Id of the form the textarea belongs to |
maxlength | number | Maximum number of characters allowed in the textarea |
name | text | Textarea name |
placeholder | text | Displays hint for the textarea |
readonly | readonly | Makes the textarea read-only |
required | no value | Requires textarea value |
rows | number | Allowed number of lines or rows in a textarea |
wrap | hard soft | How the text in a textarea is to be wrapped |
For additional global attributes see our global attributes list.
Obsolete Attributes
Do not use the attribute listed below. It is not standardized in HTML5.
autocapitalize | Sets how characters are automatically capitalized. Not supported by today's browsers. | n/a |
More Examples
Textarea with maxlength
#
A <textarea> with a maxlength attribute limits the number of characters to 50. Once it reaches 50 the textarea stops accepting characters.
<textarea rows="3" cols="45" maxlength="50"> Textarea with a max of 50 characters </textarea>Textarea with placeholder
#
A <textarea> with a placeholder attribute which adds a muted text hint to the control. As soon as data is entered, the placeholder disappears.
<textarea rows="5" cols="45" placeholder="Please enter your feedback"> </textarea>Disabled textarea
#
A <textarea> with a disabled attribute. The control is grayed out and users cannot interact with the control.
<form action="/tutorial/action.html"> <textarea rows="3" cols="45" disabled> This is a message. </textarea><br /> <button type="submit">Submit</button> </form>Did you know?
Disabling line break (enter key) in a textarea
By default, the <textarea> element accepts a new line or line break as input.
With JavaScript users can be prevented from using the enter key to add a line break.
Type some text in the <textarea> and notice that pressing the enter-key has no effect.
Form Tags
The <textarea> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, they allow you to create comprehensive data input solutions.
Here is a list of form tags
<form> | Defines a data entry area that contains input elements |
<input> | Creates an input field in which data can be entered |
<label> | Creates a label or brief description before input elements |
<textarea> | Creates a multi-line text input control |
<select> | Creates a dropdown control |
<button> | Creates a clickable button that can contain text or an image |
<datalist> | Specifies a list of options for a textfield (<input>) element |
<fieldset> | Groups related form elements and displays a box with a legend around these |
<legend> | Defines a caption for a fieldset |
Browser support
Here is when <textarea> support started for each browser:
Chrome | 1.0 | Sep 2008 |
Firefox | 1.0 | Sep 2002 |
IE/Edge | 1.0 | Aug 1995 |
Opera | 1.0 | Jan 2006 |
Safari | 1.0 | Jan 2003 |
You may also like
- Our HTML form Tag Reference
- Our HTML input Tag Reference
- Our HTML Forms Tutorial
Earn income with your HTML skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest self-service freelancing marketplace for people like you.
- HTML Tables
- HTML Images
- HTML Color Names
- HTML Links
- HTML Tags
- HTML Lists
- HTML Forms
- HTML Buttons
- HTML Spaces
- HTML Checkboxes
- HTML Editors
- HTML Comments
On this page
- Textarea tag
- Example
- Using textarea
- More Examples
- Attributes
- More examples
- Did you know
- Form tags
- Browser support
- You may also like