Forms & Inputs

<textarea> Multi-line Input

Free-form multi-line text input.

1Long-form Text

Set rows and cols (or use CSS) to control size. The default text goes between the tags — not in a value attribute.

Example Code

css

<label for="msg">Message</label>
<textarea
  id="msg"
  name="message"
  rows="5"
  cols="40"
  maxlength="500"
  placeholder="Tell us more..."
></textarea>

2Put the element in context

A textarea accepts multi-line text and can grow or scroll as the message becomes longer. Its label, name, and sizing need the same attention as other fields. Avoid a fixed height that hides context or a placeholder used as the only explanation.

3Practice with a small page

Create a labeled message field with a practical initial number of rows. Enter several paragraphs and inspect resizing and overflow. Add a length constraint only when the receiving service actually needs it, and explain that limit visibly.

Finished reading?

Mark this topic as complete to track progress.

Next Topic