🌱BeginnerForms
Select Dropdowns
Create dropdown menus with <select>, <option>, and <optgroup> elements.
Overview
The <select> element creates a dropdown menu from which users can choose one (or multiple) options. Options are defined with <option> elements inside <select>.
Related options can be grouped under headings using <optgroup> useful for long lists like country selectors or large category lists.
Key attributes:
- value on <option>: the value sent to the server (defaults to the option text)
- selected: pre-selects an option
- multiple: allows selecting multiple options (use size to show several at once)
- disabled: disables the entire select or individual options
Key Points
- •<select name="..."> contains <option> elements for each choice
- •value attribute on <option> is what gets submitted if absent, the text is sent
- •selected attribute pre-selects an option by default
- •multiple attribute allows multi-select (hold Ctrl/Cmd to select several)
- •<optgroup label="..."> groups related options under a heading
- •disabled on <option> prevents it from being selected (useful for placeholder text)
Examples
A basic country dropdown
<label for="country">Country</label>
<select id="country" name="country">
<option value="">-- Select a country --</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
<option value="au">Australia</option>
</select>The empty-value disabled option acts as a placeholder.
Pre-selected option and optgroup
<select name="language">
<optgroup label="Frontend">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js" selected>JavaScript</option>
</optgroup>
<optgroup label="Backend">
<option value="python">Python</option>
<option value="node">Node.js</option>
</optgroup>
</select>Multi-select listbox
<label for="skills">Select your skills (hold Ctrl/Cmd for multiple)</label>
<select id="skills" name="skills" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="git">Git</option>
</select>multiple turns the dropdown into a listbox. size controls visible rows.
Common Mistakes
- Forgetting the value attribute the displayed text gets submitted, not the intended code/slug
- Not adding a placeholder option users may not know a selection is required
- Using <select> for binary choices (yes/no) radio buttons are clearer for two options
Note
For small option sets (2-4 items), radio buttons give better UX they're all visible at once. Use <select> when you have 5 or more options.
Exercises
Write HTML to solve each exercise. Use Preview to see it render in a live iframe, then mark as done.
Loading editor…
Completed: 0 / 5 exercises
Knowledge Check
Question 1 of 4