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
지원 지원 지원 지원 지원