HTML Text Areas

Understanding HTML Text Areas

The HTML <textarea> element creates a form control for entering multiple lines of text.

Text areas are useful for longer information such as messages, comments, descriptions, feedback, and other content that may require more than a single line.

The <textarea> Element

The <textarea> element creates a multiline text-entry control. Unlike the <input> element, it requires both an opening and closing tag.

<textarea id="message" name="message"></textarea>

The name attribute identifies the textarea's value when the form is submitted, while the id can be used to associate the control with a label.

Textarea Labels

A textarea should normally have a visible <label> that describes the information the user should enter.

<label for="textarea-input">Message:*</label>
<textarea id="textarea-input" name="textarea-input" rows="4"></textarea>

The label's for value matches the textarea's id, creating an explicit association between the two elements.

Rows and Columns

The rows and cols attributes can provide an initial size for a textarea.

<textarea name="message" rows="6" cols="40"></textarea>

The rows attribute specifies the visible number of text lines, while cols specifies an approximate visible width in average character widths. CSS is commonly used for responsive sizing, while rows remains useful for establishing the control's initial height.

Placeholder Text

The placeholder attribute displays a short hint inside an empty textarea.

<label for="comments">Comments:</label>
<textarea id="comments" name="comments" rows="4" placeholder="Enter your comments here"></textarea>

Placeholder text should provide a hint or example rather than replace the textarea's visible label.

Limiting Text Length

The maxlength attribute limits the number of characters a user can enter into a textarea.

<textarea id="message" name="message" rows="4" maxlength="500"></textarea>

This can be useful when submitted content must stay within a specific length, although server-side processing should also verify any length restrictions.

Required Text Areas

The boolean required attribute indicates that the textarea must contain a value before the browser allows normal form submission.

<label for="message">Message:*</label>
<textarea id="message" name="message" rows="4" required></textarea>

If the textarea is empty when the form is submitted, the browser's built-in form validation prompts the user to complete it.

Default Textarea Content

The initial value of a textarea is placed between its opening and closing tags rather than in a value attribute.

<textarea id="message" name="message" rows="4">Enter your message here.</textarea>

The user can edit or replace this initial text before submitting the form.

Textarea Example

The following example uses the message textarea from the master form. Enter several lines of text, change the rows value, or add attributes such as placeholder, maxlength, or required to see how the control changes.

Textarea Best Practices

• Provide a clear visible label that describes what information should be entered.
• Use the name attribute when the textarea value needs to be submitted.
• Use an appropriate number of visible rows for the expected amount of text.
• Use placeholder text only as a hint and not as a replacement for a label.
• Use maxlength when there is a meaningful limit on the amount of text accepted.
• Use required only when the information is necessary.
• Remember that default textarea content belongs between the opening and closing tags, not in a value attribute.

Summary

The <textarea> element provides a multiline form control for longer text. Attributes such as rows, cols, placeholder, maxlength, and required can control its initial size, provide guidance, and define input requirements.

Unlike an input element, a textarea's initial value is written between its opening and closing tags.