Text and choice controls
Checkboxes and radio buttons
Model independent boolean choices with checkboxes and one choice from a set with radio buttons that share a name.
8 minute lesson
A checkbox represents an independent choice. Radio buttons represent one choice from a set.
<label>
<input name="newsletter" type="checkbox" value="yes">
Send me the weekly newsletter
</label>
When checked, this sends newsletter=yes. When unchecked, it sends no newsletter field at all. The server should turn that absence into false only if that matches the contract.
Use a shared name for radio buttons:
<fieldset>
<legend>Delivery speed</legend>
<label>
<input name="delivery" type="radio" value="standard" checked>
Standard
</label>
<label>
<input name="delivery" type="radio" value="express">
Express
</label>
</fieldset>
The shared name makes one group. Selecting Express clears Standard and sends delivery=express.
Give every option an explicit, stable value. The visible label can change without changing what the server stores.
The server must allowlist the expected values. A person can send delivery=teleport even though that option does not appear in the page.
Use separate checkboxes when several answers can be true. Controls sharing one checkbox name can produce repeated values, so read them with an API that preserves all entries.
Submit each state and inspect the payload. Pay special attention to what is absent.
Lesson completed