<select> element creates a control that allows users to choose from a set of options, typically presented in a dropdown format.
Examples and Usage
In web forms, presenting users with multiple options in an organized manner is often necessary. The
<select> element, combined with nested
<option> elements, provides a structured way to achieve this. For our demonstration, consider a scenario where we want users to choose a course from various categories:
<label for="select-course">Select a course:</label> <select id="select-course" name="course"> <optgroup label="Sciences"> <option value="physics">Physics 101</option> <option value="biology">Biology 101</option> </optgroup> <optgroup label="Arts"> <option value="history">World History</option> <option value="music">Introduction to Music</option> </optgroup> <optgroup label="Engineering"> <option value="mech">Mechanical Engineering</option> <option value="comp">Computer Science</option> </optgroup> </select>
In the example provided, the
<label> element gives a descriptive prompt to the user. The association between the
<select> is formed by matching the
for attribute in the
<label> with the
id attribute in the
<select>. This connection allows users to click the label to focus on the dropdown, improving user interaction.
<optgroup> groups related
<option> elements together. The label attribute of the
<optgroup> categorizes the subsequent options, offering an organized dropdown navigation. Each
<option> details individual choices the user can make. Along with the display text that users see, each
<option> also contains a
value attribute. This value is what gets transmitted during form submission, indicating the user's choice.
When rendered, users would encounter a dropdown menu. Upon interaction, they'd see categories like "Sciences", "Arts", and "Engineering" and, under each category, specific courses to select from.
In addition to global attributes, the
<select> element comes with a set of specific attributes to customize its behavior.
|Provides a hint for the browser's autocomplete feature.|
|Boolean attribute indicating if the user can interact with the control. If not specified, the control inherits its setting from a containing element.|
|Associates the |
|Boolean attribute indicating if multiple options can be selected. If specified, typically displays as a scrolling list box.|
|Specifies the name of the control for form submission.|
|Boolean attribute indicating that a non-empty option must be selected for form submission.|
|Represents the number of rows visible at once in a list box. Default value is |
When using the
<select> element, its accessibility behavior varies based on its attributes. If the element has the
multiple attribute or a
size attribute greater than 1, it is recommended to have a
role=listbox. For a
<select> without these attributes, it adopts a
role=combobox. In both cases, authors should avoid using the
aria-multiselectable attribute. Proper ARIA roles and attributes can greatly improve the user experience, especially for those relying on assistive technologies.
sizeattribute's default value is typically
0. However, while the HTML specification suggests a default value of
1, adhering to this has caused issues in some websites. As a result, browsers like Firefox maintain a default of
Achieving a consistent styling for the
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.