HTML - <optgroup> 標籤

HTML <optgroup> 用於 <select> 元素中，用於將相關的<option>元素進行分組。它提供了一種設定和構建下拉列表中選項的方法。當您希望透過將大型選項列表劃分為部分或類別來組織和改善使用者體驗時，這非常有用。

語法

<optgroup label= "..."></optgroup>

屬性

HTML optgroup 標籤支援 HTML 的全域性和事件屬性。以及一些特定的屬性，如下所示。

屬性	值	描述
disabled	disabled	停用輸入控制元件。按鈕將不會接受使用者的更改。它也不能接收焦點，並且在按 Tab 鍵時會被跳過。
label	文字	定義使用 <optgroup> 時要使用的標籤。

HTML optgroup 標籤示例

以下示例將說明 optgroup 標籤的使用方法。在哪裡、何時以及如何使用它來建立 optgroup 以及我們如何使用 CSS 樣式化該 optgroup。

建立 Optgroup 元素

在以下程式中，我們使用 HTML <optgroup> 標籤在 HTML 中的“select”元素中建立一個選項組。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup Tag</title>
</head>
<body>
   <!--create optgroup element-->
   <select>
      <optgroup label='Fruits'>
         <option value="apple">Apple</option>
         <option value="banana">Banana</option>
         <option value="orange">Orange</option>
         <option value="grapes">Grapes</option>
      </optgroup>
   </select>
</body>
</html>

Optgroup 中的巢狀選項

以下是 HTML <optgroup> 標籤的另一個示例。在這裡，我們使用 <optgroup> 標籤在 HTML 中的“select”元素中建立多個選項組。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup Tag</title>
</head>
<body>
   <!--create optgroup element-->
   <select>
      <option value="">Choose your option</option>
      <optgroup label='States'>
         <option value="uttarpradesh">Uttar Pradesh</option>
         <option value="punjab">Punjab</option>
         <option value="bihar">Bihar</option>
         <option value="jharkhand">Jharkhand</option>
      </optgroup>
      <optgroup label='Related Cities'>
         <option value="lucknow">Lucknow</option>
         <option value="jalandhar">Jalandhar</option>
         <option value="patna">Patna</option>
         <option value="ranchi">Ranchi</option>
      </optgroup>
   </select>
</body>
</html>

停用特定 Optgroup

在此示例中，我們使用 HTML <optgroup> 在 HTML 中的“select”元素中建立分組選項。我們使用“disabled”屬性來停用建立的組。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup tag</title>
</head>
<body>
   <!--create optgroup tag-->
   <select>
      <option value="">Choose your option</option>
      <optgroup label='Group 1'>
         <option value="opt1.1">Option 1.1</option>
         <option value="opt1.2">Option 1.2</option>
      </optgroup>
      <optgroup label='Group 2'>
         <option value="opt2.1">Option 2.1</option>
         <option value="opt2.2">Option 2.2</option>
         </optgroup>
         <optgroup label='Group 3' disabled>
         <option value="opt3.1">Option 3.1</option>
         <option value="opt3.2">Option 3.2</option>
      </optgroup>
   </select>
</body>
</html>

樣式化 Optgroup

以下是示例，我們在其中使用 HTML 中的 HTML <optgroup> 標籤在“select”元素中建立選項分組。我們使用 CSS 來設定“optgroup”的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML optgroup tag</title>
   <style>
      optgroup {
         color: green;
         background-color: aquamarine;
      }
   </style>
</head>
<body>
   <!--create optgroup tag-->
   <select>
      <option value="">Choose your option</option>
      <optgroup label='Frontend'>
         <option value="html">HTML</option>
         <option value="css">CSS</option>
         <option value="javascript">JavaScript</option>
      </optgroup>
         <optgroup label='Backend'>
         <option value="java">Java</option>
         <option value="php.2">PHP</option>
      </optgroup>
   </select>
</body>
</html>

支援的瀏覽器

標籤
optgroup	是	是	是	是	是

html_tags_reference.htm

列印頁面