HTML <select> tag

Definition and Usage

<select> Element is used to create a dropdown list.

<select> Element is most commonly used in forms to collect user input.

After submitting the form, you need to use the name attribute to refer to the form data (if the name attribute is omitted, the data in the dropdown list will not be submitted).

<select> Within the element <option> Tag Define the available options in the dropdown list.

Use the id attribute to associate the dropdown list with the label (label).

Tip:Always add <label> Tag For the best accessibility practices!

Also see:

HTML DOM Reference Manual:Select Object

CSS Tutorial:Set form styles

Example

Example 1

Create a dropdown list containing four options:

<label for="cars">Please select a car brand:</label>
<select name="cars" id="cars">
  <option value="audi">Audi</option>
  <option value="byd">BYD</option>
  <option value="geely">Geely</option>
  <option value="volvo">Volvo</option>
</select>

Try it yourself

Example 2

Include <select> Used with the <optgroup> tag:

<label for="cars">Please select a car brand:</label>
<select name="cars" id="cars">
  <optgroup label="Chinese cars">
    <option value="byd">BYD</option>
    <option value="geely">Geely</option>
  </optgroup>
  <optgroup label="German cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Try it yourself

Attribute

Attribute Value Description
autofocus autofocus Specify that the dropdown list should automatically gain focus when the page is loaded.
disabled disabled Specify that the dropdown list should be disabled.
form form id Define the form to which the dropdown list belongs.
multiple multiple Options can be selected multiple times.
name Name Define the name of the dropdown list.
required required Specify that the user must select a value before submitting the form.
size Number Define the number of visible options in the dropdown list.

Global Attributes

<select> The tag also supports Global Attributes in HTML.

Event Attributes

<select> The tag also supports Event Attributes in HTML.

Default CSS Settings

None.

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support