The <select> element creates a dropdown menu, built from a list of <option> elements — the standard control for choosing one (or several) values from a defined set.
Syntax
<select name="course">
<option value="ds">Data Science</option>
<option value="fs">Full Stack</option>
</select>Basic Example
<label for="course">Select a course</label>
<select id="course" name="course" required>
<option value="">-- Choose one --</option>
<option value="ds">Data Science</option>
<option value="fs">Full Stack Development</option>
</select>Browser output: a closed dropdown showing the currently selected option; clicking it expands the full list of choices, styled largely by the operating system rather than your CSS.
How It Works
On submission, the chosen <option>'s value is sent under the <select>'s name — see option for the full value-vs-displayed-text distinction.
Important Attributes
| Attribute | Purpose |
|---|---|
multiple | Turns the dropdown into a multi-select scrollable listbox |
required | Blocks submission if no real option is selected |
size | Shows several options at once as a fixed-height list, instead of a collapsed dropdown |
Real-World Example
<label for="skills">Skills you already know</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="python">Python</option>
</select>A multi-select list showing 4 options at once — users hold Ctrl/Cmd while clicking to select more than one, without a single checkbox in sight.
Common Mistakes
- Not including a genuinely empty/placeholder first option (like "-- Choose one --" with
value="") when a real choice is required — otherwise the first real option ends up selected by default, silently, even if the user never touched the field - Using a native multi-select listbox for a long list of options — the required Ctrl/Cmd-click interaction is unintuitive for many users compared to a list of checkboxes
Best Practices
- Include a placeholder-like first option for any dropdown where "nothing selected yet" should be a real, distinct state
- Consider checkboxes instead of
<select multiple>for anything beyond a handful of multi-select options
Accessibility Considerations
<select> is fully keyboard-navigable natively (arrow keys, type-ahead by first letter) — genuinely difficult to fully replicate with a custom-built dropdown component.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
The dropdown's expanded list is rendered by the operating system on most platforms, which is why its styling is harder to fully customize with CSS than most other form controls.
Mini Practice
- Build a course-selection dropdown with a real placeholder first option and
required. - Build a multi-select skills list using
multiple.
