HTML select and textarea: preserve meaningful values and editable text

Last updated: 5 Oct 20266 min read

tutorial

select submits a chosen option value; textarea submits its text content under a name.

Use it for a real task

A review form makes the initial reason choice intentionally empty, then asks for free-text context. The first option is disabled and selected so the required select cannot quietly send a business decision. The textarea has a visible label and a character limit; server validation still owns the stored record.

<form action="/receipts/review" method="post">
  <label for="review-reason">Reason</label>
  <select id="review-reason" name="reason" required>
    <option value="" selected disabled>Choose a reason</option>
    <option value="amount-mismatch">Amount mismatch</option>
    <option value="missing-approval">Missing approval</option>
  </select>
  <label for="review-context">Context</label>
  <textarea id="review-context" name="context" maxlength="240"></textarea>
  <button type="submit">Save review</button>
</form>

What the markup guarantees

Option text is for readers; value is the API input. Keep codes stable when copy changes. A disabled placeholder option does not absolve the server from rejecting an empty or unknown reason.

Cost and limits

The controls cost little until option lists become long. Large remote vocabularies may need search, but replacing select with a custom widget adds keyboard and focus obligations.

Common Mistakes

Do not make a placeholder a valid business value.
Do not rely on displayed option text as the stable submitted code.
Textarea content is text, not trusted HTML.

Connected lessons

Continue with HTML datalist: offer suggestions without closing the input.

Form and type styling

CSS field-sizing: let a note grow within firm limits

Related CSS decisions

CSS :open: style the native open state without inventing one

html

forms