The <option> element defines a single choice inside a <select> — with a genuinely important distinction between what's displayed and what's actually submitted.
Syntax
<option value="submitted-value">Displayed Text</option>Basic Example
<select name="course">
<option value="ds">Data Science & Machine Learning</option>
</select>Browser output: the dropdown shows "Data Science & Machine Learning" — but if this option is selected and the form is submitted, the server receives only the short value, ds.
How It Works
If value is omitted entirely, the option's own visible text is used as the submitted value instead — but writing an explicit value is almost always clearer and more stable for backend code to work with.
Important Attributes
| Attribute | Purpose |
|---|---|
value | What's actually submitted — can be completely different from the displayed text |
selected | Pre-selects this option by default |
disabled | Makes this specific option unselectable, while still visible (often grayed out) |
Real-World Example
<select name="batch">
<option value="" selected disabled>-- Select a batch --</option>
<option value="2026-sep">September 2026</option>
<option value="2026-dec" disabled>December 2026 (Full)</option>
</select>A batch selector where the placeholder option is both pre-selected and disabled (so it can't be re-chosen after picking a real batch), and one full batch is visible but greyed out and unselectable.
Common Mistakes
- Assuming the visible text is what gets submitted — always check what
valueis actually set to - Using a vague or inconsistent set of
values that don't map cleanly to what the backend expects (like mixing "Data Science" and "ds" across different options)
Best Practices
- Always set an explicit, backend-friendly
valuefor every option - Use
disabledfor genuinely unavailable choices you still want visible, rather than hiding them entirely
Accessibility Considerations
Screen readers announce both the visible option text and its disabled state when applicable — the underlying value itself is never announced, since it's purely a data-submission detail, not user-facing content.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
<optgroup> can wrap related <option>s under a bold, unselectable group label within a long dropdown — worth knowing for select lists with many categorized choices.
Mini Practice
- Build a dropdown where the displayed text and the submitted value are deliberately different.
- Add a
disabledoption representing a sold-out choice.
