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