22 min read
Checkboxes, Radio Buttons and Dropdowns
Let visitors choose: checkboxes for several choices, radio buttons for one, and select menus with option and optgroup.
Checkboxes: Choose Any
Several choices allowedHTML
<form action="order-received.html" method="get"> <p><strong>Extras</strong> (choose any)</p> <label class="choice"><input type="checkbox" name="extras" value="milk"> Milk</label> <label class="choice"><input type="checkbox" name="extras" value="honey"> Honey</label> <label class="choice"><input type="checkbox" name="extras" value="lemon" checked> Lemon</label> <p><button type="submit">Send</button></p></form>What the browser shows
Checkboxes allow multiple selections. Give them the same name so they belong together, and a different value for each. Tick two boxes and press Send: the result page shows extras twice, once for each value. checked ticks a box by default.
Wrapping the input inside its label (as here) links them without needing for and id — clicking the word ticks the box.
Radio Buttons: Choose One
Only one choiceHTML
<form action="order-received.html" method="get"> <p><strong>How would you like it?</strong></p> <label class="choice"><input type="radio" name="service" value="eat-in" checked> Eat in</label> <label class="choice"><input type="radio" name="service" value="takeaway"> Takeaway</label> <label class="choice"><input type="radio" name="service" value="delivery"> Delivery</label> <p><button type="submit">Send</button></p></form>What the browser shows
Radio buttons with the same name form a group: choosing one un-chooses the others. Always make one checked by default if there is a sensible choice.
Checkbox vs radio
| Checkbox | Radio button |
|---|---|
| Zero, one or many can be ticked | Exactly one in a group |
| "Which extras would you like?" | "Eat in, takeaway or delivery?" |
| Square box | Round button |
Dropdown Menus
select with option and optgroupHTML
<form action="order-received.html" method="get"> <label for="tea">Choose a tea</label> <select id="tea" name="tea"> <optgroup label="Black teas"> <option value="nuwara-eliya">Nuwara Eliya</option> <option value="uva" selected>Uva</option> <option value="ruhuna">Ruhuna</option> </optgroup> <optgroup label="Spiced"> <option value="ginger">Ginger tea</option> </optgroup> </select> <p><button type="submit">Send</button></p></form>What the browser shows
- <select> makes the dropdown; it has the name.
- Each <option> is one choice. Its value is what is sent; the text between the tags is what the visitor sees.
- selected chooses an option by default.
- <optgroup label="…"> groups long lists under headings.
- Add multiple to <select> to allow several choices (hold Ctrl) — though checkboxes are usually easier to use.
Grouping with fieldset and legend
A group with a headingHTML
<fieldset> <legend>Your details</legend> <label for="full-name">Full name</label> <input type="text" id="full-name" name="name"></fieldset>What the browser shows
<fieldset> draws a box round related fields and <legend> gives it a heading. Screen readers announce the legend, which helps visitors understand each group.
What the browser shows
Practice
More lessons in HTML · Next: Submit and Reset Buttons — the Complete Order Form · Previous: Forms and Text Inputs