Lesson 5 of 8
Only one choice
- 12 min
- 5 checks
- 3 hints
- Go to task
Goal
A shared name groups the buttons
Explanation
Radio buttons don't become a group because they sit next to each other, but because they share the same name. Give each button a different name and each one becomes independent, so the user can pick all three options at once.
The <fieldset> element groups them in the page structure the same way the eye already sees them together, and a <legend> at its start holds the question they answer. A screen reader reads that question when the user enters the group, so they know what's being asked before they hear an option like "Express."
Watch out for a common mistake: a radio button without a value has the value "on", so you get the same answer whatever the user picks. Reading the choice takes a single line, because form.elements.shipping.value gives you the value of the selected button.
Your task
Put the options inside a <fieldset> that starts with a <legend>, and make them a single group named shipping with the values standard, express and pickup. Then write the value of the selected option in #out whenever the choice changes.
Checks
5 checks- The options are inside a fieldset that starts with a legend
- All three buttons share one name
- Only one button can be selected at a time
- Each option has its own value instead of "on"
- The selected value shows in #out when it changes