The <select> tag creates an HTML dropdown control.
Dropdowns display a list of options of which one can be selected.
By default, only a single option can be selected.
A <select> dropdown with cities in Europe.
<select>
<option value="">-- Select city -- </option>
<option value="paris">Paris</option>
<option value="london">London</option>
<option value="athens">Athens</option>
<option value="madrid">Madrid</option>
</select>
An <option> element represents an item inside the dropdown list.
Only a single option can be selected, although multiple can change this.
Tip: The select element is very difficult to style. Therefore, developers often skip this control and create their own custom version of a dropdown.
A <select> element
with two options groups: one with European cities, and another with Asian cities.
<select>
<option value="">-- Select city -- </option>
<optgroup label="Europe">
<option value="paris">Paris</option>
<option value="london">London</option>
<option value="madrid">Madrid</option>
</optgroup>
<optgroup label="Asia">
<option value="bangkok">Bangkok</option>
<option value="manila">Manila</option>
<option value="jakarta">Jakarta</option>
</optgroup>
</select>
For details on the <option> tag, see our HTML option Tag Reference.
This table lists the <select> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| name | name | Name of the select element. |
| multiple | multiple | Allows selecting multiple options. |
| id | identifier | Defines a unique identifier for the select control. |
| class | classnames | Sets one or more CSS classes to be applied to the select element. |
| style | CSS-styles | Sets the style for the select element. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| tabindex | index | Sets a tab sequence relative to the other elements. |
| hidden | hidden | Specifies whether the select element is hidden. |
| disabled | disabled | Specifies whether the select element is disabled |
| autofocus | no value | Places focus on the control once page has been loaded |
| autocomplete | on | off | Presents the user with previously selected values |
| form | form-id | Id of the form where the select field belongs to. |
| required | no value | Requires to select a value before submitting the form. |
| size | number | Number of options that are visible in a drop-down list. |
For additional global attributes see our global attributes list.
By default, only one item can be selected from a <select> dropdown.
Adding the multiple attribute creates a multi-select control.
The select control appears as a list instead of a dropdown.
To select multiple items, press CTRL and click the option.
To submit the selected values set the name attribute to an array [].
A <select> control with a multiple attribute.
Select multiple items by holding the CTRL key down.
<form action="/tutorial/fileupload.html">
<select multiple style="height:125px;" name="cities">
<option value="paris">Paris</option>
<option value="london">London</option>
<option value="athens">Athens</option>
<option value="madrid">Madrid</option>
<option value="berlin">Berlin</option>
</select><br />
<input type="submit">
</form>
Note: You can also use multiple="multiple" instead of just 'multiple'.
The first one is XHTML, the other HTML. The browser treats them the same.
The <select> tag is part of a group of tags
that are used to create data entry forms.
This group is referred to as the Form tag group.
Together, they allow you to create comprehensive data input solutions.
Here is a list of form tags
| Element | Description |
|---|---|
| <form> | Defines a data entry area that contains input elements |
| <input> | Creates an input field in which data can be entered |
| <label> | Creates a label or brief description before input elements |
| <textarea> | Creates a multi-line text input control |
| <select> | Creates a dropdown control |
| <button> | Creates a clickable button that can contain text or an image |
| <datalist> | Specifies a list of options for a textfield (<input>) element |
| <fieldset> | Groups related form elements and displays a box with a legend around these |
| <legend> | Defines a caption for a fieldset |
Here is when <select> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
