最終更新日

optgroup要素

optgroup要素は、メニューの選択肢項目を、見出し付きでグループ化します。グループ化する対象の選択肢項目として、子要素にoption要素を含めます。プルダウン形式のメニューなどに利用できます。

label属性は、指定しなければならない必須の属性です。グループの名前を指定します。

disabled属性を指定すると、option要素のグループが一括で使用不可に設定されます。

optgroup要素の終了タグは、直後に別のoptgroup要素があるか、もしくはoptgroup要素が親要素内の最終コンテンツである場合に省略可能です。

HTML5での変更点
特にありません
カテゴリ タグの省略 親要素 子要素
なし 終了タグのみ省略可能 select option
属性 説明
label 文字列 選択肢グループの見出しを指定します。
disabled disabled 論理属性。optgroup要素内の項目が使用不可になります。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <p>お好みの商品を選択して下さい。</p>
  <select name="product">
    <optgroup label="レギュラーメニュー">
      <option value="cheese">チーズバーガー</option>
      <option value="fileo">フィレオフィッシュ</option>
      <option value="teriyaki">てりやきバーガー</option>
    </optgroup>
    <optgroup label="サイドメニュー">
      <option value="potato">フライドポテト</option>
      <option value="nugget">チキンナゲット</option>
      <option value="applepie">アップルパイ</option>
    </optgroup>
    <optgroup label="ドリンク">
      <option value="coffee">コーヒー</option>
      <option value="caffellatte">カフェラテ</option>
      <option value="cappuccino">カプチーノ</option>
    </optgroup>
  </select>
</body>
参考文献:W3C HTML5「4.10.11 The optgroup element」外部リンク
HOME