splitforms.com
Get free key
HTML · FORM CONTROL

HTML Textarea — multi-line input with a live working form

The <textarea> element is a multi-line text input, used for messages, comments, and anything longer than a single line. Unlike <input>, it has opening and closing tags and a size set by rows and cols. Below is a working contact form with a message textarea that actually submits.

Updated June 2026 · The <textarea> element · 12 elements in the reference

Get free access key Try the live demo
preview · html textareasandboxed · no key
§ 01Copy-paste codeworking · submits to a free backend
textarea.html
<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" cols="40"
            maxlength="1000" placeholder="Tell us what you need…"
            required></textarea>

  <input type="checkbox" name="botcheck" style="display:none">
  <button type="submit">Send message</button>
</form>

Replace YOUR_ACCESS_KEY with a key from your free splitforms dashboard. The form posts to one endpoint — submissions land in your inbox and dashboard with spam filtering built in.

§ 02<textarea> attributes
AttributeWhat it does
rowsThe visible height in text lines. Sets the default size; CSS height overrides it.
colsThe visible width in average characters. Prefer CSS width for real layouts.
maxlengthMaximum number of characters the user can type. Enforce length limits server-side too.
placeholderA hint shown when the textarea is empty. Not a replacement for a <label>.
requiredBoolean. Blocks submit if the textarea is empty.
wrapsoft (default) wraps visually but submits as one line; hard wraps and inserts line breaks.
resizeCSS property — none, vertical, horizontal, or both. Default lets the user drag the corner.
§ 03Common mistakes
⚠ gotcha

Default content goes between the tags

Unlike <input value="...">, a textarea's default text is written between <textarea> and </textarea>. Watch for leading whitespace — it shows up in the submitted value.

⚠ gotcha

rows/cols are a fallback

They set a rough default size. For real layouts, control height and width with CSS so the field matches your design.

⚠ gotcha

maxlength is client-only

A determined user can remove it in DevTools. Re-validate the length on the server before storing or forwarding the message.

§ 04Questions
What is a textarea in HTML?
A <textarea> is a multi-line text input control. It lets users enter longer content like a message, comment, or description, and submits whatever was typed under its name= attribute when the form is posted.
What is the correct HTML for making a text area?
Use <textarea name="message" rows="5" cols="40"></textarea>. The rows and cols attributes set the default size, and the name= attribute is required for the value to be submitted.
How are textarea cols and rows measured?
rows is the visible height measured in lines of text. cols is the visible width measured in average character widths. Both are approximate — use CSS width and height for precise layouts.
How do I limit textarea length?
Add maxlength="1000" to cap the number of characters the user can type, then check the length again server-side since the attribute can be removed in the browser.
Should I use input or textarea?
Use <input type="text"> for a single line (name, email, subject) and <textarea> for anything that may span multiple lines (message, bio, feedback). Textarea resizes and wraps; a text input does not.

Make this form actually submit.

Point your form at splitforms. 500 free submissions/month, spam filtering, webhooks — no server.

Get free access key →All HTML elements