HTML <select> Tag

定义和用法

<select> 元素用于创建下拉列表。

<select> 元素最常用于表单中，用于收集用户输入。

提交表单后，需要 name 属性引用表单数据（如果省略 name 属性，下拉列表中的数据将不会被提交）。

<select> 元素内的 <option> 标签 定义下拉列表中的可用选项。

需要使用 id 属性将下拉列表与标签（label）相关联。

提示：始终添加 <label> 标签 以获得最佳可访问性实践！

另请参阅：

HTML DOM 参考手册：Select 对象

CSS 教程：设置表单样式

实例

例子 1

创建一个包含四个选项的下拉列表：

<label for="cars">请选择一个汽车品牌：</label>
<select name="cars" id="cars">
  <option value="audi">奥迪</option>
  <option value="byd">比亚迪</option>
  <option value="geely">吉利</option>
  <option value="volvo">沃尔沃</option>
</select>

亲自试一试

例子 2

将 <select> 与 <optgroup> 标签一起使用：

<label for="cars">请选择一个汽车品牌：</label>
<select  name="cars" id="cars">
  <optgroup label="中国车">
    <option value="byd">比亚迪</option>
    <option value="geely">吉利</option>
  </optgroup>
  <optgroup label="德国车">
    <option value="mercedes">奔驰</option>
    <option value="audi">奥迪</option>
  </optgroup>
</select>

亲自试一试

属性

属性 值 描述
autofocus autofocus 规定下拉列表应在页面加载时自动获得焦点。
disabled disabled 规定应禁用下拉列表。
form 表单 id 定义下拉列表所属的表单。
multiple multiple 可以一次选择多个选项。
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