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>标签的使用纯粹是为了在下拉列表中视觉上组织选项,它不提供任何额外的功能。

属性:

标签特定属性:

属性描述
disableddisabled如果设置,则该<optgroup>中的选项将被禁用。
label文本定义组在下拉列表中显示的标签。它是必需属性。

全局属性:

HTML的<optgroup>标签支持HTML的全局属性。

事件属性:

HTML的<optgroup>标签支持HTML的事件属性。

支持的浏览器

元素ChromeIEFirefoxOperaSafari
<optgroup>

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想