HTML textarea: Multi-line Text Input

An input holds one line. For longer text such as a message, use textarea.

index.html

HTML

<form>
  <label for="msg">Your message</label><br>
  <textarea id="msg" name="msg" rows="5" cols="40" maxlength="500"></textarea>
</form>

Attributes

Attribute	Purpose
`rows`	Visible number of lines
`cols`	Visible width in characters
`maxlength`	The longest text allowed
`placeholder`	A hint while empty
`required`	Must be filled in

Starting text

Unlike input, textarea is not an empty element. Any text between the tags is the starting value.

index.html

HTML

<textarea name="note" rows="3">Thanks for visiting.</textarea>

Styling

rows and cols are fine for quick work. In real projects, size it with CSS: width: 100% and a min-height. You can allow or stop resizing with resize: vertical; or resize: none;.

warning

Extra spaces inside the tags

Whitespace between <textarea> and </textarea> becomes part of the value. Keep the tags tight if the box should start empty.