Checkboxes: any number of choices
A checkbox can be on or off. A group lets visitors choose several.
index.html
HTML
<form>
<fieldset>
<legend>Which genres do you like?</legend>
<label><input type="checkbox" name="genre" value="mystery"> Mystery</label><br>
<label><input type="checkbox" name="genre" value="fantasy" checked> Fantasy</label><br>
<label><input type="checkbox" name="genre" value="travel"> Travel</label>
</fieldset>
</form>Radio buttons: exactly one choice
Radio buttons with the same name form a group where only one can be chosen.
index.html
HTML
<form>
<fieldset>
<legend>Format</legend>
<label><input type="radio" name="format" value="paper"> Paperback</label><br>
<label><input type="radio" name="format" value="hard" checked> Hardback</label>
</fieldset>
</form>Key points
| Attribute | Meaning |
|---|---|
name | Groups radios and names the value sent |
value | What is sent when the option is chosen |
checked | Chosen at the start |
Only the checked boxes and the chosen radio are sent with the form.
Which one?
- One yes or no question: a single checkbox.
- Pick any of several: checkboxes.
- Pick exactly one of a few: radio buttons. For long lists use a
select.
warning
Different names on radios
If radio buttons have different
name values they are not a group, and you can select all of them. Give each option in the group the same name.