码农教程 - 一技在手,衣食无忧! tools

HTML <select> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

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

<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>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

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

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

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

这个id需要属性将下拉列表与标签关联起来。

这个<选项>里面的标签<select>元素定义下拉列表中的可用选项。

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

浏览器支持

Element
<select> Yes Yes Yes Yes Yes

属性

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

全局属性

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

事件属性

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

更多示例

示例

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

<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>
亲自试一试 »

相关页面

HTML DOM 参考：选择对象

CSS 教程：CSS 表单

默认 CSS 设置

没有任何。


❮上一节 完整的 HTML参考 下一节❯