CodesBeautify

HTML Textarea Generator

Create a multi line text box with rows, a character limit, a resize rule and an optional counter.

Textarea HTML6 rows, max 500
<label for="message">Your message</label>
<textarea id="message" name="message" rows="6" placeholder="Tell us what happened" maxlength="500" required></textarea>

<style>
#message { resize: vertical; }
</style>
Runs locally in your browser

About the HTML Textarea Generator

A textarea holds multi line text and, unlike an input, it has no value attribute: whatever sits between the opening and closing tags becomes the starting content, whitespace included. That is why this builder puts any default text immediately after the opening tag with no indentation at all, since a stray newline or a run of spaces would show up inside the box when the page loads.

The rows attribute sets the visible height in lines and is the sensible way to size the control, while cols is left out because a CSS width behaves far better in a responsive layout. Switch on the counter and the snippet gains a live readout wired to the input event, plus an aria-describedby link so the remaining allowance is announced rather than only shown to sighted users.

The resize rule is a small courtesy. Vertical only lets people make the box taller without dragging it past the edge of a narrow column, which is exactly what unrestricted resizing does on a phone. One subtlety with limits: maxlength counts UTF-16 code units, so a single emoji can consume two of them and a comment that looks short can be rejected. To count what somebody actually pasted, the Word Counter does the arithmetic.

How to use

  1. Set the rows to the height that suits the answer you expect.
  2. Add a placeholder prompting the kind of detail you want.
  3. Set a character limit and turn on the counter if the limit is tight.
  4. Copy the label, the textarea and the counter script together.

Common questions

How do I set default text in a textarea?
Put it between the opening and closing tags. There is no value attribute, and any indentation you add will appear in the box.
Should I use rows or CSS for the height?
Use rows for a sensible starting height and CSS for anything responsive; the two work together fine.
Why does my counter disagree with the server?
The browser counts UTF-16 code units, so emoji and some accented characters count as two while your backend may count differently.
Can I stop people resizing the box?
Yes, with resize none, though locking it entirely frustrates anyone writing a long answer. Vertical only is a fairer compromise.