Selects, optgroups, multiple and a datalist
selectedIndex counts options across all optgroups: the placeholder is 0, Pune 1, Bengaluru 2, Tokyo 3.
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
city: blr index 2
now: Tokyo (no value attribute, so the text is used)
langs: [ 'html', 'js' ]
langs .value gives only the first: html
fruit: Mango | suggestions: 3