Checkboxes and a radio group
Clicking Large un-picked Medium. The agree box has no value, so it sends on. Olives isn't ticked, so it isn't sent at all.
Checkboxes let people pick any number of options, radio buttons sharing a name let them pick exactly one, <select> packs choices into a drop-down (or a list with multiple), and <datalist> suggests values for a free-text box.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a question "How did you hear about us?" with radio buttons Friend, Search engine and Social media, in a fieldset.
Write a country select with optgroups Asia (India, Japan) and Europe (France, Spain) and a first option that forces a choice.
Explain it without notes
When should you use checkboxes, radio buttons, a select or a datalist?
What is sent for a checked checkbox with no value, and for an unchecked one?
How does the browser know which radio buttons belong together?
How do you read all selected options of a <select multiple>?
Preview
Console
Nothing logged yet.Expected console output
topping=cheese&topping=corn&size=m&terms=on
topping=cheese&topping=corn&size=l&terms=on
Medium still checked? false
All toppings: [ 'cheese', 'corn' ]