Tutorials 参考 练习 Menu
Paid Courses

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 "来试试吧" 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 示例

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.





W3Schools is optimized for learning and training. 示例 might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
W3Schools is Powered by W3.CSS.