HTML <select> Tag
Example
Create a drop-down list with four options:
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Try it Yourself »
More "Try it Yourself" examples below.
Definition and Usage
The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).
The id attribute is needed to associate the drop-down list with a label.
The <option> tags inside the <select> element define the available options in the drop-down list.
Tip: Always add the <label> tag for best accessibility practices!
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
Attributes
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specify that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specify that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specify that multiple options can be selected at once |
| name | name | Define a name for the drop-down list |
| required | required | Specify that the user is required to select a value before submitting the form |
| size | number | Define the number of visible options in a drop-down list |
Global Attributes
The <select> tag also supports the Global Attributes in HTML.
Event Attributes
The <select> tag also supports the Event Attributes in HTML.
More Examples
Example
Use <select> with <optgroup> tags:
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Try it Yourself »
Related Pages
HTML DOM reference: Select Object
CSS Tutorial: Styling Forms
Default CSS Settings
None.
