optgroup 要素

4.10.11 optgroup 要素

カテゴリー
なし
この要素を使うことができるコンテキスト：
select 要素の子として。
コンテンツ・モデル：
0 個以上の option 要素。
コンテンツ属性：
グローバル属性
disabled
label
DOMインタフェース：
interface HTMLOptGroupElement : HTMLElement {
           attribute boolean disabled;
           attribute DOMString label;
};

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

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

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

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

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

disabled と label 属性は、同じ名前の対応するコンテンツ属性を反映しなければいけません。

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

<form action="courseselector.dll" method="get">
 <p>Which course would you like to watch today?
 <p><label>Course:
  <select name="c">
   <optgroup label="8.01 Physics I: Classical Mechanics">
    <option value="8.01.1">Lecture 01: Powers of Ten
    <option value="8.01.2">Lecture 02: 1D Kinematics
    <option value="8.01.3">Lecture 03: Vectors
   <optgroup label="8.02 Electricity and Magnestism">
    <option value="8.02.1">Lecture 01: What holds our world together?
    <option value="8.02.2">Lecture 02: Electric Field
    <option value="8.02.3">Lecture 03: Electric Flux
   <optgroup label="8.03 Physics III: Vibrations and Waves">
    <option value="8.03.1">Lecture 01: Periodic Phenomenon
    <option value="8.03.2">Lecture 02: Beats
    <option value="8.03.3">Lecture 03: Forced Oscillations with Damping
  </select>
 </label>
 <p><input type=submit value="▶ Play">
</form>

※ 原文：http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-optgroup-element