Input HarborISSUE #14 of 46

textarea · multiline input

FormaVSCaptain Invalid Input

Forma says<textarea> is a resizable multi-line text box — for comments, messages, and anything longer than one line.

Unlike <input>, a <textarea> holds multiple lines and its content goes between the tags, not in a value attribute. Size it with rows and cols (or CSS), and constrain with maxlength.

Users can usually drag-resize it; control that with the CSS resize property. Pair it with a label and a placeholder for hint text, like any other control.

Power-ups you unlock

Multi-line input; content sits between the tags
rows/cols (or CSS) set the size
maxlength caps length; placeholder hints
CSS resize controls user dragging

Captain Invalid Input attacks — common mistakes

Trying to set initial text via a value attribute (use inner content)
No maxlength on a field that hits a database column limit
Forgetting it is still just text — no rich formatting

Boss battleAdd a 4-row textarea with a 100-character maxlength and a placeholder, then disable resizing with CSS.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:sans-serif;padding:20px">
  <form action="#">
    <label>message<br>
      <textarea name="msg" rows="4" maxlength="100" placeholder="up to 100 chars…" style="resize:none;width:100%"></textarea>
    </label>
  </form>
</body></html>

▶ Open the interactive comic issue

‹ Select · Option · Optgroup · Datalist Button · Type · Submit · Reset · Button ›