How to Use the textarea Element

The HTML textarea element is a form control for entering multiline plain text, such as a message, comment, or support request. Use input for a short single-line value and textarea when the text may contain line breaks.

The answer first

Minimal example

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

Matching for and id values associate the label with the control. rows and cols are initial size hints. Use CSS for the final size, spacing, and responsive behavior.

This example omits the submit button and destination so you can focus on the text control. A real form also needs an action, a submit button, and server-side handling.

Where to write the initial value

The initial value is the text between the opening and closing textarea tags. Adding a value attribute does not specify the initial value the way it does for input.

<textarea id="note" name="note" rows="4">Text shown at first</textarea>

What you use	What it means
Text between the tags	The value shown initially
textarea.value	Read or change the current value
textarea.defaultValue	Work with the value used as the form-reset baseline

The current value after editing is not always the same as the initial value in the HTML. Resetting the form returns the control to its initial-value baseline.

Set a useful size and hint

rows is a hint for the number of visible lines, while cols is a hint for the number of characters per line. Choose values that fit the expected message, then use CSS to adapt the control to different screens.

<label for="comment">Comment</label>
<textarea id="comment" name="comment" rows="6" cols="50"
  placeholder="Enter your comment"></textarea>

placeholder is a short hint shown before a value is entered. It is not a replacement for a label, which continues to identify the field.

Require a value and limit its length

Add required to use the browser's constraint validation for a non-empty value. Use minlength and maxlength to set lower and upper limits for the text.

<label for="description">Description (at least 10 characters)</label>
<textarea id="description" name="description"
  minlength="10" maxlength="500" required></textarea>

Browser constraint validation helps people complete a form. The server must still validate the submitted value, including its allowed content and length.

The difference between readonly and disabled

Attribute	Control state	Form submission
readonly	Users cannot edit, but they can read and select the text	It remains a normal form control
disabled	The control is not interactive	Its value is not included in form submission

Use the attribute that matches your intent: temporarily prevent editing, or remove the control from the form operation. In both cases, do not trust the browser to enforce server-side rules.

Common mistakes

• Writing <textarea value="Text">. Put the initial value between the tags.
• Using only a placeholder to explain the field. A placeholder disappears after typing, so provide a label.
• Using only rows and cols to fix the size on every screen. Use CSS for responsive width and presentation.
• Trusting browser validation as a security boundary. Validate received values on the server too.
• Expecting a disabled control to submit its value. If the value must remain part of the form operation, consider readonly or another design.

Going further

A textarea is more than a large input box. Its initial and current values, form reset, constraint validation, line breaks, accessibility, and submitted value all interact. Give the field a clear label and explain any meaningful limits on the message.

Check it in Atlas

For the specification boundary between initial and current values, newline normalization, wrap, form submission, the HTMLTextAreaElement API, and accessibility mappings, see the textarea element in Yugien Atlas. The shared form submission model is covered by the form element in Atlas, and label association by the label element in Atlas.