HTML <select> 标签

定义和用法

<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 名称 定义下拉列表的名称。
required required 规定在提交表单之前用户必须选择一个值。
size 数字 定义下拉列表中可见选项的数量。

全局属性

<select> 标签还支持 HTML 中的全局属性。

事件属性

<select> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

无。

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持