A textarea creates a multiline text field for messages, comments, notes, and other longer entries. Its opening and closing tags surround the initial content, while the name attribute identifies the submitted field and the id connects it to a label and JavaScript.

The text area HTML pattern also separates three related concepts: text placed between the tags, a placeholder hint, and the control’s current value. Each behaves differently in a form and in JavaScript.

Create and label a textarea

Give the control a unique id, then set the label’s for attribute to the same value. Add a name so the field can be included in form submission.

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

The label makes the purpose clear and gives users a larger target for focusing the field. The matching for and id attributes establish that connection. The name becomes the field’s submission key, such as message.

Unlike a void element such as input, a textarea requires both an opening tag and a closing tag. The content belongs between those tags, even when the field starts empty. A field without a name can still be read with JavaScript, but its value is not included in a normal form submission.

Initial content versus placeholder text

To supply initial text, write it between the opening and closing textarea tags:

<textarea id="message" name="message" rows="5" cols="40">Please include your order number.</textarea>

This text is the field’s initial value. It appears as real content, can be edited immediately, and is submitted if the user leaves it unchanged. Do not use a value attribute as the source of a textarea’s initial text. The content between the tags is the correct HTML mechanism.

A placeholder is only a temporary instruction or example:

<textarea id="message" name="message" placeholder="Describe the issue" rows="5" cols="40"></textarea>

The placeholder disappears when the user types and is not submitted as the field’s value. It should not replace a visible label or carry essential information. Keep the element empty between its tags when you want a placeholder rather than initial content.

Whitespace between the tags also becomes part of the initial content. Avoid unintended spaces or line breaks if the starting value must match an exact string.

Read and set the HTML textarea value

When a form is submitted, the browser sends the textarea’s current value under its name. For the earlier example, a field named message contributes a name-value pair similar to message=The user’s text. The exact encoding depends on the form’s method and encoding settings, but the submitted text comes from the current field value.

JavaScript reads that current value through the element’s value property:

const message = document.getElementById("message");
const currentText = message.value;

Use the same property to replace or append text:

message.value = "A new starting message";
message.value += "\nAdditional details";

The value property changes as the user types. It therefore represents the current, editable content, not necessarily the text originally written in the HTML. If you need the original markup-defined value, defaultValue represents that starting value. Calling a form reset restores the textarea to its default value.

Size and resize the control with rows and cols

The rows and cols attributes set the textarea’s approximate starting dimensions:

<textarea name="message" rows="8" cols="60"></textarea>

• rows indicates the approximate number of visible text lines.
• cols indicates the approximate character width.
• Neither attribute limits how much text the user can enter.

Font choice, browser rendering, and CSS can affect the displayed size. For consistent layouts, set the control’s width and height in an external stylesheet rather than relying only on cols and rows. Those HTML attributes still provide useful fallback dimensions and communicate the intended editing area.

Textareas are commonly resizable by dragging their corner. Set the CSS resize property to vertical when users may change the height but not the width, or to none when resizing should be disabled. Add a maxlength attribute when the field also needs a character limit; sizing alone does not enforce one.