仕様

OPTGROUP要素は、
共通のラベルを持つ
option要素のグループを
表します。

optgroupオプションのグループ (Option Group)
カテゴリなし
種類通常要素
この要素を
使用できる
状態		select要素
許可されて
いる内容		0個以上の option要素, およびスクリプトをサポートする要素。
属性グローバル属性,
label
ユーザーに表示されるラベル
disabled
フォームコントロールが無効になっているかどうか
text / html
での
タグの省略		開始タグは省略できません。optgroup要素の直後に別の optgroup要素が続いている場合、または親要素にこれ以上コンテンツがない場合は、optgroup要素の終了タグを省略できます。
許可されて
いるARIA		なし[既定値 : group]
DOM
インター
フェイス
HTMLOptGroupElement
  1. [Exposed=Window]
  2. interface HTMLOptGroupElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute boolean disabled;
  6. [CEReactions] attribute DOMString label;
  7. };
レンダリング
特になし
参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
optgroup要素は、共通のラベルを持つ option要素のグループを表します。
  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <optgroup label="alphabet">
  4. <option>abcdef</option>
  5. <option>ghijkl</option>
  6. </optgroup>
  7. <optgroup label="number">
  8. <option>123456</option>
  9. <option>789012</option>
  10. </optgroup>
  11. </select>
  12. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  13. <br>受信用の<br>ページへ
  14. </form>

受信用の
ページへ
参照元
  1. HTML Living Standard. 4.10.9 The optgroup element
  2. HTML 5.2 W3C 勧告. 4.10.9 The optgroup element
  3. HTML 4.01 Specification W3C 勧告. 17.6 The SELECT, OPTGROUP, and OPTION elements
  4. MDN Web Docs. HTML <optgroup>:

使用可能な箇所

select要素に
配置できます。

optgroup要素は、select要素に配置できます。

  1. <select>
  2. <optgroup label="alphabet">
  3. <option>abcdef</option>
  4. <option>ghijkl</option>
  5. </optgroup>
  6. <optgroup label="number">
  7. <option>123456</option>
  8. <option>789012</option>
  9. </optgroup>
  10. </select>

select要素の子要素として配置できます。

配置できるコンテンツ

option要素を
配置できます。

optgroup要素は、0個以上の option要素, およびスクリプトをサポートする要素を配置できます。

  1. <select>
  2. <optgroup label="alphabet">
  3. <option>abcdef</option>
  4. <option>ghijkl</option>
  5. </optgroup>
  6. <optgroup label="number">
  7. <option>123456</option>
  8. <option selected>789012</option>
  9. </optgroup>
  10. </select>

optgroup要素には、0個以上の option要素, およびスクリプトをサポートする要素を配置できます。option要素に selected属性を設定する事で初期状態の選択を指定できます。

属性

label属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <optgroup label="alphabet">
  4. <option>abcdef</option>
  5. <option>ghijkl</option>
  6. </optgroup>
  7. <optgroup label="number">
  8. <option>123456</option>
  9. <option>789012</option>
  10. </optgroup>
  11. </select>
  12. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  13. <br>受信用の<br>ページへ
  14. </form>

label属性は、グループのラベルを表します。label属性を指定する必要があります。


受信用の
ページへ

disabled属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <optgroup label="alphabet" disabled>
  4. <option>abcdef</option>
  5. <option>ghijkl</option>
  6. </optgroup>
  7. <optgroup label="number">
  8. <option>123456</option>
  9. <option>789012</option>
  10. </optgroup>
  11. </select>
  12. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  13. <br>受信用の<br>ページへ
  14. </form>

disabled属性は、ユーザーがそのコントロールを利用できないことを示す論理属性です。


受信用の
ページへ

気を付ける点

グループのラベルは選択の対象ではありませんが、表示される物なので表示する幅を必要とします。入力内容となる option要素だけで幅を意識するとレイアウトが意図と異なる事もあるので注意が必要です。