optgroup要素

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>
Updated / Published