HTML <select> tag

Updated: 08/02/2020 by Computer Hope
HTML select tag

When writing in HTML, 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 together 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

Within an HTML tag, an attribute dictates certain aspects of an HTML element. Attributes are made up of a name and value pair; all tags support standard attributes. The following table shows all of the current unique HTML attributes for the <select> tag, and a description of each.

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.
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, Web design terms