HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのoptgroupタグとは？ドロップダウンリストの選択肢をグループ化する方法

<optgroup>要素とは

HTMLの<optgroup>要素は、ドロップダウンリスト（<select>要素）の中にある選択肢（<option>要素）をグループ化するための要素です。例えば、学部課程と大学院課程のように、関連する選択肢を1つのリスト内でカテゴリ別にまとめて表示できます。選択肢が多い場合でも表示が整理されるため、ユーザーが目的の項目を見つけやすくなるというメリットがあります。

<optgroup>要素の主な属性

  • disabled：指定したオプショングループ全体を無効化し、選択できない状態にします。
  • label：オプショングループの見出しとなるラベルを指定します。ここで設定したテキストが、ドロップダウンリスト内にグループ名として表示されます。

<optgroup>の実装例

以下は、<optgroup>要素を使って「学部」と「大学院」の2つのグループに分けたドロップダウンリストを作成するサンプルコードです。

<!DOCTYPE html>
<html>
<body>
<h2>最終学歴を選択してください</h2>
<select>
  <optgroup label="学部">
   <option value="bca">BCA</option>
   <option value="bcom">B.COM</option>
   <option value="btech">B.TECH</option>
  </optgroup>
  <optgroup label="大学院">
   <option value="mca">MCA</option>
   <option value="mcom">M.COM</option>
   <option value="mtech">M.TECH</option>
   <option value="msc">M.Sc</option>
  </optgroup>
</select>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、2つのセクションに分かれたドロップダウンリストが表示されます。<select>要素の中に2つの<optgroup>を配置することで、選択肢を「学部」と「大学院」のグループに分けて整理しています。

<select>
<optgroup label="学部">
<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>
</optgroup>
<optgroup label="大学院">
<option value="mca">MCA</option>
<option value="mcom">M.COM</option>
<option value="mtech">M.TECH</option>
<option value="msc">M.Sc</option>
</optgroup>
</select>

ドロップダウンリストの個々の選択肢は、<option>要素で定義します。value属性にはフォーム送信時に渡される値を設定し、要素内のテキストが画面に表示される項目名になります。ユーザーは同じオプショングループの中から、任意の1つを選択することができます。

<option value="bca">BCA</option>
<option value="bcom">B.COM</option>
<option value="btech">B.TECH</option>

補足：disabled属性の活用

<optgroup>要素にdisabled属性を追加すると、そのグループに含まれるすべての選択肢がグレーアウトして選択できなくなります。メンテナンス中など、一時的に利用できないカテゴリがある場合に便利です。

  1. HTMLのdataタグとは？機械可読なデータを紐付ける使い方を解説

    HTMLの<data>タグは、表示するコンテンツに機械が読み取り可能な形式の値（machine-readable value）を関連付けるために使用される要素です。人間には見やすいテキストを表示しながら、ブラウザやスクリプト、検索エンジンなどに対しては数値やコードといった処理しやすいデータを提供できます。基本構文<data>タグの基本的な書き方は以下の通りです。<data value="">表示するテキスト</data>value属性には、コンテンツの内容に対応する機械可読な値を指定します。この属性は必須であり、省略した場合に

  2. HTMLのtextarea disabled（無効）属性の使い方

    <textarea>要素のdisabled（無効）属性は、テキストエリアを操作できない状態にするために使用します。この属性を指定すると、ユーザーは<textarea>内のテキストを編集することはもちろん、テキストを選択することすらできなくなります。 構文 disabled属性の基本的な構文は以下のとおりです。 <textarea disabled> 使用例 それでは、<textarea>要素のdisabled属性を実装した具体例を見ていきましょう。以下のコードでは、学生情報フォームの中で「Info」欄のテキストエリアを無効化しています。 <