HTML textarea in forms: practical guide with examples

Use a <textarea> when a single-line input is too small for the answer you need. Messages, feedback, support descriptions, job application notes, and project briefs all belong in a textarea.

The better question is not “how do I add a textarea?” It is “how do I collect useful long text without hurting usability, accessibility, or deliverability?” A production textarea needs a clear label, a useful size, sensible limits, and backend handling for long or abusive content.

Basic textarea form

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="message">Message</label>
5
  <textarea id="message" name="message" rows="5" required></textarea>
6

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

The important attributes are:

Without name, the browser will not include the textarea value in the submitted form data.

Textarea vs input

Use a text input for short values. Use a textarea for longer free-form responses.

Do not use a textarea for email addresses, phone numbers, dates, or prices. Specialized input types give users better mobile keyboards and browser validation.

Add useful limits

Long text is valuable, but unbounded text is a spam and storage risk. Set maxlength for the browser and enforce limits on the backend.

1
<label for="project">Project details</label>
2
<textarea
3
  id="project"
4
  name="project_details"
5
  rows="7"
6
  minlength="20"
7
  maxlength="3000"
8
  placeholder="Tell us what you are building, your timeline, and what should happen after submission."
9
  required
10
></textarea>

Use minlength only when a short answer would be unusable. For contact forms, required plus maxlength is usually enough.

Use placeholder text carefully

Placeholder text can show examples, but it should not replace the label. Placeholder text disappears as soon as the visitor starts typing and may be missed by assistive technology.

Good:

1
<label for="support_message">What happened?</label>
2
<textarea
3
  id="support_message"
4
  name="support_message"
5
  rows="6"
6
  placeholder="Include the page URL, error message, and what you expected to happen."
7
></textarea>

Poor:

1
<textarea placeholder="Message"></textarea>

The poor version has no label and no name, so it is both less accessible and less useful to the backend.

Control resizing with CSS

Browsers often allow visitors to resize textareas. That is useful, but horizontal resizing can break narrow layouts.

1
textarea {
2
  width: 100%;
3
  min-height: 140px;
4
  resize: vertical;
5
}

resize: vertical lets visitors make the textarea taller without breaking the page width.

Submit textarea content to a backend

This complete example works on a static site and sends a structured submission to FormsFort.

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <input type="hidden" name="subject" value="New support request" />
4

5
  <label for="email">Email</label>
6
  <input type="email" id="email" name="email" autocomplete="email" required />
7

8
  <label for="category">Category</label>
9
  <select id="category" name="category" required>
10
    <option value="">Choose a category</option>
11
    <option value="billing">Billing</option>
12
    <option value="technical">Technical issue</option>
13
    <option value="account">Account</option>
14
  </select>
15

16
  <label for="message">Details</label>
17
  <textarea id="message" name="message" rows="7" maxlength="3000" required></textarea>
18

19
  <input type="checkbox" name="botcheck" style="display:none" />
20
  <button type="submit">Send request</button>
21
</form>

When submitted, the backend receives email, category, and message as normal fields. That makes the submission easy to email, forward to a webhook, append to a sheet, or triage in a dashboard.

Security and spam notes

Textarea fields attract spam because they accept arbitrary text. Use a honeypot field, rate limits, domain restrictions, and optional CAPTCHA for exposed forms.

Never render submitted textarea content as raw HTML in an admin panel or email template. Escape user content before display. Even when your form is static, submitted text is untrusted input.

Related guides

See HTML form examples for copy-paste templates, HTML input fields for short fields, and honeypot vs CAPTCHA for spam protection.