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>

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

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

The <select> element is most often used in a size, to lớn collect user input.

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

The id attribute is needed to lớn 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!

Xem thêm: MÔ HÌNH HUB AND SPOKE VỚI CÁC SITE SPOKE BỊ GIỚI HẠN

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 size 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 lớn 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>

Try it Yourself »

HTML DOM reference: Select Object

CSS Tutorial: Styling Forms