HTML オプションのグループ化：ドロップダウン機能を強化する

はじめに

HTML の <optgroup> タグは、ドロップダウンリスト内のオプションのグループを作成するために使用されます。この実験では、optgroup を作成し、属性を使用してカスタマイズする手順を学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を記述する方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、ウェブページをプレビューできます。

HTML ファイルをセットアップする

index.html という名前の新しいファイルを作成します。基本的な HTML 構造を追加し、body 要素内に <select> タグを含めます。

<!doctype html>
<html>
  <head>
    <title>HTML Optgroup Tag Lab</title>
  </head>
  <body>
    <select>
      <!-- options will go here -->
    </select>
  </body>
</html>

ドロップダウンリストにオプションを追加する

オプションのリストを作成するために、<select> タグ内に <option> タグを追加します。各オプションの値を設定するには、value 属性を使用します。

<select>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

optgroup を作成する

特定のオプションをまとめるために <optgroup> タグを使用します。グループの名前を定義するには、label 属性を追加します。

<select>
  <optgroup label="Group 1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

optgroup を無効にする

ドロップダウンリスト内のオプションのグループ全体を無効にするには、disabled 属性を使用します。この属性を開始の <optgroup> タグに追加します。

<select>
  <optgroup label="Group 1" disabled>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="option3">Option 3</option>
  </optgroup>
</select>

まとめ

<optgroup> タグは、ドロップダウンリスト内のオプションのグループを作成するために使用されます。disabled や label などの属性を使用してカスタマイズできます。この実験の手順に従えば、HTML でオプションを効果的にグループ化して整理することができます。