HTML教程-HTML<optgroup>标签

HTML的<optgroup>
标签用于在<select>
元素中将相关的<option>
选项进行分组。
在下拉列表中使用<optgroup>
标签可以更轻松地访问下拉列表,尤其是当列表中有大量选项时。
语法
<optgroup label=" ">........</optgroup>
下面是关于HTML <optgroup>
标签的一些规范:
显示方式 | 内联 |
---|---|
开始标签/结束标签 | 开始和结束标签 |
用法 | 表单和输入 |
示例
<!DOCTYPE html>
<html>
<head>
<title>Optgroup Tag</title>
<style>
body {
text-align: center;
}
select {
font-size: 20px;
font-weight: bold;
color: green;
}
</style>
</head>
<body>
<h2>Example of optgroup tag</h2>
<label>Select your favourite brand</label><br>
<select>
<optgroup label="Laptop Manufacturer">
<option value="dell">Dell</option>
<option value="hp">HP</option>
<option value="lenovo">Lenovo</option>
<option value="acer">Acer</option>
</optgroup>
<optgroup label="Mobile Manufacturer">
<option value="apple">Apple</option>
<option value="nokia">Nokia</option>
<option value="samsung">Samsung</option>
<option value="coolpad">Coolpad</option>
</optgroup>
</select>
</body>
</html>
在这个示例中,选项被分为两个组:"Laptop Manufacturer"和"Mobile Manufacturer"。
<optgroup>
标签用作相关选项的容器,它应该位于<select>
元素内部。每个<optgroup>
可以使用label
属性指定组的名称或标签。
<optgroup>
标签的使用纯粹是为了在下拉列表中视觉上组织选项,它不提供任何额外的功能。
属性:
标签特定属性:
属性 | 值 | 描述 |
---|---|---|
disabled | disabled | 如果设置,则该<optgroup> 中的选项将被禁用。 |
label | 文本 | 定义组在下拉列表中显示的标签。它是必需属性。 |
全局属性:
HTML的<optgroup>
标签支持HTML的全局属性。
事件属性:
HTML的<optgroup>
标签支持HTML的事件属性。
支持的浏览器
元素 | Chrome | IE | Firefox | Opera | Safari |
---|---|---|---|---|---|
<optgroup> | 是 | 是 | 是 | 是 | 是 |