DevKit Tools

Textarea Generator

Generate textarea markup with label, rows, placeholder, maxlength and required. Live preview and copyable HTML.

Forms/Textarea

Multi-line text input with sizing and validation attributes.

Live preview

<label for="message">Message</label>
<textarea id="message" name="message" rows="4" placeholder="Tell us more…"></textarea>

About the textarea generator

A textarea holds multi-line text. Unlike an input its value goes between the tags rather than in a value attribute, which trips people up when setting a default.

rows sets the visible height, though CSS overrides it. maxlength enforces a hard limit, and pairing it with a visible counter is what stops people writing a paragraph they will lose.

How to use it

  1. 1Write the label and placeholder.
  2. 2Set rows for the visible height.
  3. 3Add maxlength if there is a real limit.
  4. 4Mark it required if the form needs it.
  5. 5Copy the HTML.

Questions

How do I set a default value in a textarea?

Put it between the opening and closing tags. Unlike an input, a textarea has no value attribute.

Should I let users resize it?

Usually yes. resize: vertical is a good compromise, since it helps with long answers without letting the layout break horizontally.

How do I stop it growing past the layout?

Set a max-height in CSS, or use resize: vertical so only the height can change.

More HTML tools