HTML radio and checkbox controls: submit choices with explicit values

Last updated: 5 Oct 20266 min read

tutorial

Radio buttons with one name select one option; checkboxes represent independent on-or-off selections.

Use it for a real task

A receipt review selects one disposition and may independently request a copy. Each control has a label and explicit value. The fieldset and legend name the radio group, so the options have context when reached out of visual order.

<form action="/receipts/review" method="post">
  <fieldset>
    <legend>Disposition for R-47</legend>
    <label><input type="radio" name="decision" value="approve" required> Approve</label>
    <label><input type="radio" name="decision" value="hold"> Hold</label>
  </fieldset>
  <label><input type="checkbox" name="send_copy" value="yes"> Send a copy</label>
  <button type="submit">Record decision</button>
</form>

What the markup guarantees

An unchecked checkbox normally contributes no entry, so the server needs a defined default. The client can still send an unlisted value or both radio values; validate the received set and authorization.

Cost and limits

Native grouping handles keyboard interaction without custom controls. Each additional option adds DOM and review work; keep the choice set small enough to scan.

Common Mistakes

Do not give radios in one group different names.
Never infer a missing checkbox entry means the user saw it.
Define the server's behavior for repeated or unknown choice values.

Connected lessons

Related CSS decisions

CSS :indeterminate: show a mixed selection without inventing its meaning

html

forms