HTML <select> tag
When writing in HTML (hypertext markup language), the <select> tag is an inline element used to designate a control that presents a drop-down menu of options. The options in the list are defined by the <option> tag and grouped using <optgroup>. The following sections contain information about the <select> tag, including an example of it in use, and related attributes and browser compatibility.
The <select> tag belongs to a group of tags called form elements.
Example of <select> code
<select>
<optgroup label="Mammals">
<option>Cat</option>
<option>Dog</option>
</optgroup>
<optgroup label="Birds">
<option>Crow</option>
<option>Eagle</option>
</optgroup>
<optgroup label="Dinosaurs">
<option>Raptor</option>
<option>Tyrannosaurus</option>
<option>Brachiosaurus</option>
</optgroup>
</select>
Example result
If you hover your mouse cursor over the right side of the box, a down arrow appears. Click this arrow to choose your favorite animal.
Example with larger box
In addition to having a drop-down box, a larger select box allows more options or all available options to show using the size attribute. Below we added size="10" to the select tag to allow ten items to fit in the box.
We've also added multiple to the select tag to allow multiple items to be selected in the above box. To select multiple items, hold down the Ctrl on the keyboard and click each item you want to select.
Attributes
All HTML tags support standard attributes that define the settings of an HTML element. In addition to the standard settings, the <select> tag has the following unique attributes.
| Attribute | Description |
|---|---|
| autofocus | Designates that the drop-down list should automatically be focused upon the page loading. |
| disabled | Disables the drop-down list. |
| form | Designates the form(s) to which the <select> element belongs. |
| multiple | Designates that more than one option may be selected from the list. To select more than one option hold Ctrl while selection options. |
| name | Designates a name for the drop-down list. |
| require | Designates that the user is required to select a value before the form is submitted. |
| size | Specifies the number of visible options in a drop-down list. |
Compatibility
| Edge | Internet Explorer | Firefox | Safari | Opera | Chrome |
|---|---|---|---|---|---|
| All versions | All versions | All versions | All versions | All versions | All versions |