1 Star 0 Fork 1

小弟调调 / html-tutorial

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
option.md 2.61 KB
一键复制 编辑 原始数据 按行查看 历史
小弟调调 提交于 2022-05-01 14:37 . doc: add tag document.

HTML <option> 标签

示例

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

<label for="cars">Choose a car:</label>
<select id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

定义和用法

<option> 标签在选择列表中定义一个选项。

<option> 元素进入 <select><optgroup><datalist> 元素。

注意: <option> 标签可以不带任何属性使用,但您通常需要 value 属性,该属性指示表单提交时发送到服务器的内容。

提示: 如果您有很长的选项列表,您可以在 <optgroup> 标记中对相关选项进行分组。

浏览器支持

Element chrome edge firefox safari opera
<option> Yes Yes Yes Yes Yes

属性 Attributes

属性 描述
disabled disabled 指定一个选项应该被禁用
label text 为选项指定较短的标签
selected selected 指定在页面加载时应预先选择一个选项
value text 指定要发送到服务器的值

全局属性

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

事件属性

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

更多示例

在 <datalist> 元素中使用 <option>:

<label for="browser">从列表中选择您的浏览器:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

在 <optgroup> 元素中使用 <option>:

<label for="cars">Choose a car:</label>
<select 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>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/jaywcjlove/html-tutorial.git
git@gitee.com:jaywcjlove/html-tutorial.git
jaywcjlove
html-tutorial
html-tutorial
main

搜索帮助