optgroup要素
Updated / Published
optgroup要素（option group）は select要素で作る選択メニューの中で選択項目の option要素 をまとめてグループ化します。選択肢が複雑であったり、選択肢が多く見通しが悪い場合にユーザビリティの向上に役立ちます。
視覚環境の UA では optgroup要素によってメニュー項目が階層化され、メニューのラベル（見出し）を label属性で指定することで視覚的にわかりやすくなる効果が期待されます。最新の UA は optgroup要素に十分対応していますが、対応していない UA であれば optgroup要素部分は無視されるので、互換性を義性にすることなく使えるように設計されています。
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 要素型
- select要素の子要素
- 開始タグ
- 必須
- 終了タグ
- 必須
- 非推奨
- -
- 内容モデル
- option要素（1個以上）
disabled属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- 必須
- -
- 非推奨
- -
- 属性値
- disabled
- disabled="disabled"（XHTML）
ユーザによるグループ化した選択項目を選択する操作を禁止します。選択が禁止されたコントロール部品の値（この場合は option要素の value属性の値）は選択できないため、データ送信時にも送信されません。HTML4.01 では disabled、XHTML では属性値を省略できないため disabled="disabled" と記述します。Internet Explorer6, 7 は optgroup要素の disabled属性に対応していないので、この機能は無効です（選択もできれば、選択した値も送信されてしまいます）。
label属性
- バージョン
- HTML4.01(S,T,F)
- XHTML1.0(S,T,F)
- XHTML1.1
- 指定要素
- optgroup
- 必須
- 必須属性
- 非推奨
- -
- 属性値
- 文字列
グループ化した選択項目にラベル（見出し）を指定します。さらに各選択肢に対しても、内容となっているテキストそのものよりも簡略化した見出しを option要素の label属性に指定することで、グループ化選択用の簡略表示のレンダリングが期待されるのですが、この仕様通りのレンダリングを行うのは Safari, Chrome, Blink版Opera のみで、それ以外の UA では option要素の内容となっているテキストをそのまま表示します。
その他の属性
optgroup要素のサンプル
<p>もっとも良く利用するブラウザは次のうちどれですか。<br>
<select name="browser" size="15">
<optgroup label="Netscape Navigator or Netscape">
<option label="8.x" value="N8">Netscape Browser 8.x</option>
<option label="7.x" value="N7">Netscape 7.x</option>
<option label="6.x" value="N6">Netscape 6.x</option>
<option label="4.x" value="N4">Netscape Navigator 4.x</option>
</optgroup>
<optgroup label="Internet Explorer">
<option label="7.0" value="I7">Internet Explorer 7.0</option>
<option label="6.0" value="I6">Internet Explorer 6.0</option>
<option label="5.x" value="I5">Internet Explorer 5.x</option>
</optgroup>
<optgroup label="Opera">
<option label="9.x" value="O9">Opera 9.x</option>
<option label="8.x" value="O8">Opera 8.x</option>
<option label="7.x" value="O7">Opera 7.x</option>
</optgroup>
<option value="F1">Firefox 1.x</option>
<option value="Other">Other</option>
</select>
</p>