The Speed Coding

HTML <select> Tag


Example

Create a drop-down list with four options:

<label for="cars" > Choose a car:</label>

<select name="cars" id="cars">
  <option value="volvo" > Volvo</option>
  <option value="saab" > Saab</option>
  <option value="mercedes" > Mercedes</option>
  <option value="audi" > Audi</option>
</select>

More "Try it Yourself" examples below.


Definition and Usage

The <select> element is used to create a drop-down list.

The <select> element is most often used in a form, to collect user input.

The name attribute is needed to reference the form data after the form is submitted (if you omit the name attribute, no data from the drop-down list will be submitted).

The id attribute is needed to associate the drop-down list with a label.

The <option> tags inside the <select> element define the available options in the drop-down list.

Tip: Always add the <label> tag for best accessibility practices!


Browser Support

Element
<select> Yes Yes Yes Yes Yes

Attributes

Attribute Value Description
autofocus autofocus Specifies that the drop-down list should automatically get focus when the page loads
disabled disabled Specifies that a drop-down list should be disabled
form form_id Defines which form the drop-down list belongs to
multiple multiple Specifies that multiple options can be selected at once
name name Defines a name for the drop-down list
required required Specifies that the user is required to select a value before submitting the form
size number Defines the number of visible options in a drop-down list

Global Attributes

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


Event Attributes

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


More Examples

Example

Use <select> with <optgroup> tags:

<label for="cars" > Choose a car:</label>
<select name="cars" id="cars">
  <optgroup label="Swedish Cars" >
    <option value="volvo" > Volvo</option>
    <option value="saab" > Saab</option>
  </optgroup>
  <optgroup label="German Cars" >
    <option value="mercedes" > Mercedes</option>
    <option value="audi" > Audi</option>
  </optgroup>
</select>

Related Pages

HTML DOM reference: Select Object

CSS Tutorial: Styling Forms


Default CSS Settings

None.