References

Beginner-friendly references for web development, with live, editable examples.

The HTML <textarea> tag

Element All modern browsers Updated
Quick answer

The HTML <textarea> element is a multi-line plain-text input. Its size is set with rows and cols (and CSS), and its initial value is the text between its tags — not a value attribute.

Overview

The <textarea> element creates a multi-line plain-text input — the right control for comments, messages, descriptions and any free-form text that may run past a single line.

It differs from <input> in a couple of ways worth remembering. Its initial content goes between the opening and closing tags rather than in a value attribute, and it is resizable by the user by default. Set its visible size with the rows and cols attributes (or with CSS), cap the length with maxlength, and control how submitted line breaks are handled with wrap.

As with every control, give it a <label>. If the user-resize handle does not suit your layout, you can constrain or disable it with the CSS resize property.

Syntax

<label for="msg">Message</label>
<textarea id="msg" name="message" rows="4"></textarea>

Attributes

The <textarea> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
autocomplete on off — or a specific token such as email, name, current-password, one-time-code. Controls browser autofill for a field.
cols A positive integer (default 20). Sets the visible width of a textarea.
dirname A field name to submit the direction under, e.g. comment.dir. Submits a field's text direction with the form.
disabled A boolean attribute — present or absent. Disables a form control.
form The id of a <form> element. Associates a control with a form by id.
maxlength A non-negative integer. Limits the maximum character count.
minlength A non-negative integer. Sets the minimum character count.
name A string (the field name used in the submitted data). Names a form control for submission.
placeholder A string of hint text. Shows hint text in an empty field.
readonly A boolean attribute — present or absent. Makes a field read-only.
required A boolean attribute — present or absent. Marks a form control as mandatory.
rows A positive integer (default 2). Sets the visible line count of a textarea.
wrap soft (default) hard Controls textarea line wrapping on submit.

Example

Live example 
<label for="c">Comment</label>
<textarea id="c" name="comment" rows="3" placeholder="Write a comment…" style="width:100%;"></textarea>

Best practices

  • Pair every <textarea> with a <label>.
  • Set the visible size with rows (and cols) or with CSS height.
  • Put any initial text between the tags, not in a value attribute.
  • Use maxlength to limit input, and the CSS resize property to control the drag-to-resize handle.

Frequently asked questions

What is the difference between textarea and input?
A <textarea> accepts multiple lines and stores its content between the tags; an <input> is single-line and uses a value attribute.
How do I set the size of a textarea?
Use the rows and cols attributes, or set its width and height with CSS.
How do I limit the number of characters in a textarea?
Add the maxlength attribute with the maximum number of characters.
How do I set default text in a textarea?
Place the default text between the opening and closing tags: <textarea>Default text</textarea>.
template tfoot