轻松上手,快乐学习!

HTML <select> 标签



实例

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

<label for="cars">选择一辆车:</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> 元素中的 <option> 标签定义下拉列表中的可用选项。

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


浏览器支持

元素
<select> Yes Yes Yes Yes Yes

属性

属性 描述
autofocus autofocus 规定在页面加载时下拉列表自动获得焦点。
disabled disabled 当该属性为 true 时,会禁用下拉列表。
form form_id 定义 select 字段所属的一个或多个表单。
multiple multiple 当该属性为 true 时,可选择多个选项。
name name 定义下拉列表的名称。
required required 规定用户在提交表单前必须选择一个下拉列表中的选项。
size number 规定下拉列表中可见选项的数目。

全局属性

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


事件属性

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


更多实例

实例

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

<label for="cars">选择一辆车:</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 参考手册: Select 对象

CSS 教程: Styling Forms


默认CSS设置

None.