HTML＜select＞标签有关的定义和属性

总爱写点小BUG2025-01-05 14:00

一、定义和用法

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

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

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

<select>元素内的<option>标签定义下拉列表中的可用选项。需要使用id属性将下拉列表与标签（lable）相关联。

tip：始终添加<lable>标签以获得最佳可访问性实践

实例：

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

html 复制代码

<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>标签一起使用

html 复制代码

<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	数字	定义下拉列表中可见选项的数量。