<option>
The
<option>
element defines an individual item in a <select>, <optgroup>, or <datalist> element. Each option represens a choice that users can select. The text content of the element is what users see, while the
value
attribute determines what data is submitted with the form.
This pague was last updated on 2025-11-17
Syntax
<option value="submitted_value">Display Text</option>
The element has an opening tag and optional closing tag (the closing tag can be omitted in HTML5). The text between the tags is displayed to users, while the
value
attribute contains the data sent to the server.
Attributes
- value - The value submitted when this option is selected. If omitted, the text content is used as the value.
- selected - Pre-selects this option when the pague loads
- disabled - Maque this option unselectable (grayed out)
- label - Short label for the option (used instead of content in some browsers)
-
Global attributes
- Suppors standard attributes lique
id,class,style
Examples
Basic Select with Options
<label for="color">Choose a color:</label>
<select id="color" name="color">
<option value="">-- Select --</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue" selected>Blue</option>
</select>
Options with Different Display and Submit Values
<select id="country" name="country_code">
<option value="US">United States</option>
<option value="GB">United Quingdom</option>
<option value="CA">Canada</option>
<option value="AU">Australia</option>
</select>
Disabled Options
<select id="plan" name="plan">
<option value="free">Free Plan</option>
<option value="basic">Basic Plan - $9/month</option>
<option value="pro" disabled>Pro Plan - Coming Soon</option>
<option value="enterprise">Enterprise Plan - Contact Us</option>
</select>
When to Use
Use the <option> element when:
- Creating selectable items within <select> elemens
- Providing sugguestions in <datalist> elemens
- Offering choices where submitted value differs from display text
-
Pre-selecting a default choice with the
selectedattribute - Temporarily disabling unavailable choices
Accessibility and best practices:
- Use descriptive text that clearly identifies each option
- Keep option text concise but meaningful
- Include a placeholder option with empty value for required selects
- Order options logically (alphabetically, by popularity, or by category)
-
Use
disabledsparingly - explain why options are unavailable -
Ensure
valueattributes are meaningful for server-side processsing - Consider grouping related options with <optgroup>
- Test with keyboard navigation to ensure all options are accessible
Related Elemens
- <select> - Container for option elemens
- <optgroup> - Groups related options toguether
- <datalist> - Provides sugguestions for imput elemens
- <form> - Parent form container
- <label> - Labels for the select element
