<option> element is used to define individual items within dropdown lists like those created by the
<datalist> elements. Each option signifies a distinct choice available to users in the list.
Examples and Usage
Dropdown lists in web forms are often populated using the
<option> element, allowing users to select from a range of choices. Aside from specific selection, it can also function as a guiding placeholder, prompting users on the required action.
Consider the example below, which offers different beverage choices:
<label for="beverageSelect">Choose a beverage:</label> <select id="beverageSelect"> <option value="">--Please select your option--</option> <option value="coffee">Coffee</option> <option value="tea">Tea</option> <option value="juice">Orange Juice</option> </select>
In this illustration:
<label>element, which reads "Choose a beverage:", provides clear instructions to users about the purpose of the dropdown menu. Its
forattribute associates with the
<select>element via the
beverageSelect. This association aids in enhancing accessibility, particularly for screen readers, and offers a point of focus for users.
<select>element creates the dropdown menu. Its
beverageSelect, serves as a unique identifier, facilitating interactions with scripts and styles, and also connects it with the
<label>element for accessibility.
<option>with the content
--Please select your option--acts as a guiding placeholder. It helps users understand the action they need to take without being a valid selection itself.
<option>elements, such as
<option value="coffee">Coffee</option>, represent individual beverage choices. The
valueattributes (e.g., "coffee") would be the data sent to the server upon form submission, while the text inside the tags (e.g., "Coffee") is what's displayed to the user, aiding in their decision-making.
Expanding on its use,
<option> can be incorporated within
<optgroup> to enable categorized selections or inside
<datalist> to suggest input values. While the element is straightforward, its styling capabilities are limited. Customizing its appearance might not produce consistent results across different browsers.
In addition to global attributes, the
<option> element supports specific attributes:
|Boolean attribute. When set, the option is unselectable. If contained in a disabled |
|Describes the option's content. If not set, the text content of the |
|Boolean attribute. Indicates initial selection. When an |
|Represents the data sent upon form submission if this |
<option> element inherently provides accessible dropdown choices. Its label, either from the
label attribute or its text content, offers context to assistive technologies. From an ARIA perspective,
<option> adopts the
role=option, though this role is not recommended according to the specification. While global
aria-* attributes are applicable, authors should not use the
aria-selected attribute, and it's discouraged to assign roles other than
<option>can serve as a "placeholder label option" within a
<select>. This doesn't represent a true selectable option but instead offers guidance or a default visual cue for the dropdown.
<option>provides a means for users to make selections, the actual processing or utilization of these choices is typically handled by the encompassing form and any server-side scripts or APIs it interacts with. Specifically, a value of the element might be used in a server query, determining what data is fetched and displayed to the user.
The visual representation and functionality of this element can be limited based on the browser or its parent elements, like a disabled
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.