HTML <select> tag

Updated: 09/12/2023 by Computer Hope
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.

Note

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

Choose your favorite animal from this list:


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.

Tip

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

Additional form elements

Browser, Compatibility, Container tag, Form, Selected, Web design terms