optgroup 要素

4.10.9 optgroup 要素

カテゴリー:
なし
この要素を使うことができるコンテキスト:
select 要素の子として
コンテントモデル:
0 個以上の optionスクリプトサポート要素
コンテント属性:
グローバル属性
disabled - フォームコントロールを無効にするかどうか
label - ユーザーに見せるラベル
text/html におけるタグの省略:
optgroup 要素の終了タグは、その optgroup 要素の直後に他の optgroup 要素が来るか、または、親要素に他にコンテンツがないなら、省略することができます。
指定可能な ARIA role 属性 の値:
なし
指定可能な ARIA ステートとプロパティ属性:
グローバル aria-* 属性
DOM インタフェース:
interface HTMLOptGroupElement : HTMLElement {
           attribute boolean disabled;
           attribute DOMString label;
};

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

この要素の option 要素のグループは、optgroup 要素の子となる option 要素から構成されます。

select 要素の中で option 要素を表示する際、ユーザーエージェントは、お互いに関連しあっていると見えるように、そのグループの option 要素を表示し、他の option 要素から分離するべきです。

disabled 属性は論理属性で、option 要素のグループをまとめて無効にするために使われます。

label 属性の指定は必須です。その値はグループの名前を与えるもので、ユーザーインタフェースの目的のためです。ユーザーエージェントは、select 要素の中の option 要素のグループをラベリングする際に、この属性の値を使うべきです。

disabledlabel 属性は、それぞれ同じ名前の対応するコンテント属性を反映しなければいけません。

次の抜粋は、3 つのコースのレッスンのセットを、select 要素のドロップダウン・ウィジットにどうやって提示できるのかを示しています:

<form action="courseselector.dll" method="get">
 <p>今日はどの講座をご覧になりますか?
 <p><label>Course:
  <select name="c">
   <optgroup label="8.01 物理 I: 古典力学">
    <option value="8.01.1">講座 01: 10 のべき乗
    <option value="8.01.2">講座 02: 一次元運動
    <option value="8.01.3">講座 03: ベクトル
   <optgroup label="8.02 電磁気">
    <option value="8.02.1">講座 01: 何が私達の世界を結び付けているのか?
    <option value="8.02.2">講座 02: 電界
    <option value="8.02.3">講座 03: 電束
   <optgroup label="8.03 物理 III: 振動と波動">
    <option value="8.03.1">講座 01: 周期現象
    <option value="8.03.2">講座 02: うなり
    <option value="8.03.3">講座 03: 減衰を伴う強制振動
  </select>
 </label>
 <p><input type=submit value="▶ 再生">
</form>

※ 原文:http://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-optgroup-element