<textarea>

<textarea> is a multiline plain-text editing control. Its initial value goes between the opening and closing tags, not in a value attribute. JavaScript reads and changes its current value through .value.

A labeled message field

<label for="message">Message</label>
<textarea
  id="message"
  name="message"
  rows="4"
  maxlength="200"
  aria-describedby="message-help"
></textarea>
<p id="message-help">Up to 200 characters. Plain text only.</p>

/* Optional presentation */
label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
}

The matching for and id provide its name. The help text stays visible and is associated through aria-describedby. Keep the area resizable unless the interface has a good reason to limit it.

Attributes and defaults

rows and cols suggest the initial size; CSS can override it. With no rows value, the default is two. required, minlength, and maxlength provide native constraints. readonly allows reading and ordinary submission while preventing edits; disabled prevents ordinary focus and submission.

Unlike certain input types, textarea has no native pattern attribute. A custom text rule requires your own validation and accessible feedback. Spellchecking is a hint and can depend on the browser, language, and user settings.

A working character counter

<label for="note">Short note</label>
<textarea
  id="note"
  rows="3"
  maxlength="100"
  aria-describedby="remaining"
></textarea>
<p id="remaining">100 characters remaining</p>
<script>
  const field = document.querySelector("textarea");
  const remaining = document.querySelector("#remaining");
  field.addEventListener("input", () => {
    remaining.textContent = `${field.maxLength - field.value.length} characters remaining`;
  });
</script>

/* Optional presentation */
label {
  display: block;
  margin: 0.75rem 0 0.25rem;
}
input,
select,
textarea,
button {
  font: inherit;
  max-width: 100%;
}

The counter now changes when you type. It stays ordinary helper text instead of making a screen reader announce every keystroke. A production limit may need more careful handling of user-perceived characters: JavaScript string length and native maxlength count UTF-16 code units.

Common mistakes

Indentation and blank text inside textarea can become part of its initial value. A textarea does not render HTML or Markdown, resize itself to its content, or provide a formatted preview automatically. Escape literal closing-tag text when showing code inside a textarea. Continue with form for submission and validation behavior.

Sources and browser support

MDN: textarea describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.