* optgroup 要素型 (HTML, XHTML 1)

[2] [[HTML]] の [DFN[[CODE(HTMLe)[optgroup]] 要素型]]の要素は、
メニュー制御子 ([CODE(HTMLe)[[[select]]]] 要素) の選択肢を集団化します。

[3] 仕様書:
- [[HTML 4]] ([[Web Forms 1.0]])
-- [CITE[menus]]
<IW:HTML4:"interact/forms.html#menu">
-- [CITE[17.6 The [CODE(HTMLe)[SELECT]], [CODE(HTMLe)[OPTGROUP]], and [CODE(HTMLe)[OPTION]] elements]]
<IW:HTML4:"interact/forms.html#edef-OPTGROUP">
-- [CITE[A.1.2 Errors that were corrected]]
<IW:HTML4:"appendix/changes.html#h-A.1.2">
- [[Web Forms 2.0]]
-- [CSECTION@en[2.3. Changes to existing controls]]
<IW:WF2:"#changes">
-- [CSECTION@en[2.18. Handling unexpected elements and values]]
<IW:WF2:"#handling">

[4] 
:状態:[[W3C]] [[勧告]]
:[[名前空間URI]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]]
:[[局所名]]:[CODE(HTMLe)@en[[[optgroup]]]]
([Q@en[[RUBYB[選択肢群] @en[option group]]]]より)
:[[開始タグ]]:必須
:[[終了タグ]]:必須
:出現できる文脈:
[CODE(HTMLe)@en[[[select]]]] または
[CODE(HTMLe)@en[[[optgroup]]]]
の[[子供]]として
:[[内容モデル]]:
[CODE(SGML)@en[([CODE(HTMLe)[[[option]]]] | [CODE(HTMLe)@en[[[optgroup]]]])*]]
:[[属性]]:
,属性名	,属性値	,既定値	,説明	,出典
,[CODE(HTMLa)[[[class]]]]	,	,(なし)	,[[級]]	,"[HTML 4] %[[coreattrs]] ⊂ %[[attrs]], [XHTML 1] [[Core]] ⊂ [[Common]]"
,[CODE(HTMLa)[[[dir]]]]	,	,	,[[書字方向]]	,"[HTML 4] %[[i18n]] ⊂ %attrs, [XHTML 1] [[I18N]] ⊂ Common"
,[CODE(HTMLa)[[[disabled]]]]	,([[真偽値属性]])	,(偽)	,無効	,[HTML 4]
,[CODE(HTMLa)[[[id]]]]	,[CODE(SGML)[[[ID]]]]	,(なし)	,一意識別子	,"[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common"
,[CODE(HTMLa)[[[label]]]]	,[CODE(SGML)[%[[Text]]]]	,(必須)	,階層名	,[HTML 4]
,[CODE(HTMLa)[[[lang]]]]	,	,	,[[自然言語]]	,[HTML 4] %i18n ⊂ %attrs
,[CODE(HTMLa)[[[xml]]:lang]]	,	,	,自然言語	,[XHTML 1] I18N ⊂ Common
,[CODE(HTMLa)[[[onclick]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %[[events]] ⊂ %attrs, [XHTML 1] [[Events]] ⊂ Common"
,[CODE(HTMLa)[[[ondblclick]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common"
,[CODE(HTMLa)[[[onkeydown]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common"
,[CODE(HTMLa)[[[onkeypress]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common"
,[CODE(HTMLa)[[[onkeyup]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common"
,[CODE(HTMLa)[[[onmousedown]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common"
,[CODE(HTMLa)[[[onmousemove]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common"
,[CODE(HTMLa)[[[onmouseout]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common"
,[CODE(HTMLa)[[[onmouseover]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common"
,[CODE(HTMLa)[[[onmouseup]]]]	,[CODE(SGML)[%[[Script]]]]	,(なし)	,	,"[HTML 4] %events ⊂ %attrs, [XHTML 1] Events ⊂ Common"
,[CODE(HTMLa)[[[style]]]]	,	,	,スタイル情報	,"[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] [[Style]] ⊂ Common"
,[CODE(HTMLa)[[[title]]]]	,	,	,注釈的題	,"[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common"

** 内容

[1] [CODE(HTMLe)[optgroup]] 要素の子供には、選択肢である
[CODE(HTMLe)[[[option]]]] 要素を配置できます。

[[#comment]]


** 空要素

[7]
[[HTML 4]] では、[[子要素]]として [CODE(HTMLe)@en[[[option]]]]
が1つ以上必要でした。 [SRC@en[HTML 4 17.6.1]]

[8]
[[Web Forms 2.0]] では、この制限が撤廃され、
[[空]]に[['''して構いません''']]。
ただし、[[利用者]]の混乱を防ぐため、
[[著者]]は [CODE(HTMLe)@en[[[optgroup]]]]
を[[空]]かつ可視のままに[['''するべきではありません''']]。
[SRC@en[WF2 2.3]]

[[#comment]]


*** 入れ子

[10] [[Web Forms 2.0]] によれば、
[CODE(HTMLe)@en[[[optgroup]]]]
内に [CODE(HTMLe)@en[[[optgroup]]]]
を入れることができます。
[SRC@en[WF2 2.3]]

[9]
[[HTML 4]] では [CODE(HTMLe)@en[[[optgroup]]]] を 
[CODE(HTMLe)@en[[[optgroup]]]]
の[[子供]]にすることはできませんでしたが、
将来[[入れ子]]にできるようになるかもしれないと実装者に注意が促されていました。
[SRC@en[[[HTML 4]] 17.6.1]]


*** メモ

[[#comment]]


** レンダリング

[6] 視覚 UA は、階層構造を階層メニューその他の構造を反映した方法でレンダリングして構いません
[SRC[HTML 4 17.6.1]]。

実際のレンダリングには、
その環境で一般的なメニューのレンダリング形式を踏襲するのが良いでしょう。
例えば、多くの GUI システムではメニューを階層化して表示できます。
[CODE(HTMLe)[optgroup]] の部分を下位メニューとすれば、
選択肢の多いメニューでもすっきりするかもしれません。

また、 [[TreeView]] control のような表現も考えられるでしょう。

[11] '''誤り処理'''

[CODE(HTMLe)@en[[[optgroup]]]] [[要素]]内で
[CODE(HTMLe)@en[[[select]]]] [[要素]]における役割を果たすのは
[CODE(HTMLe)@en[[[option]]]] と
[CODE(HTMLe)@en[[[optgroup]]]] だけで、
その他の[[子供節点]]は、
[[スタイル・シート]]で特に指定されない限り、
[[レンダリング]]されません。
[SRC@en[WF2 2.18]]

[11] '''[CODE(HTMLe)@en[select]] 外'''

[CODE(HTMLe)@en[[[select]]]] [[要素]]外の
[CODE(HTMLe)@en[[[option]]]] は、
[CODE(HTMLe)@en[[[span]]]] と同じように[[レンダリング]][['''するべきです''']]。
[SRC@en[WF2 2.18]]

[[#comment]]


** 例

[5] 階層メニューの例 [SRC[HTML 4 17.6.1]]
[PRE(HTML)[
<FORM action="http://somesite.com/prog/someprog" method="post">
 <P>
 <SELECT name="ComOS">
     <OPTION selected label="none" value="none">None</OPTION>
     <OPTGROUP label="PortMaster 3">
       <OPTION label="3.7.1" value="pm3_3.7.1">PortMaster 3 with ComOS 3.7.1</OPTION>
       <OPTION label="3.7" value="pm3_3.7">PortMaster 3 with ComOS 3.7</OPTION>
       <OPTION label="3.5" value="pm3_3.5">PortMaster 3 with ComOS 3.5</OPTION>
     </OPTGROUP>
     <OPTGROUP label="PortMaster 2">
       <OPTION label="3.7" value="pm2_3.7">PortMaster 2 with ComOS 3.7</OPTION>
       <OPTION label="3.5" value="pm2_3.5">PortMaster 2 with ComOS 3.5</OPTION>
     </OPTGROUP>
     <OPTGROUP label="IRX">
       <OPTION label="3.7R" value="IRX_3.7R">IRX with ComOS 3.7R</OPTION>
       <OPTION label="3.5R" value="IRX_3.5R">IRX with ComOS 3.5R</OPTION>
     </OPTGROUP>
 </SELECT>
</FORM>
]PRE]

この例では、選択肢は次のような階層構造になっています。
- [SAMP[None]]
- [SAMP[PortMaster 3]]
-- [SAMP[3.7.1]]
-- [SAMP[3.7]]
-- [SAMP[3.5]]
- [SAMP[PortMaster 2]]
-- [SAMP[3.7]]
-- [SAMP[3.5]]
- [SAMP[IRX]]
-- [SAMP[3.7R]]
-- [SAMP[3.5R]]

レンダリング例: <IW:HTML4:"images/optgroup_exmpl.gif">

このレンダリング例では、階層構造をそのまま [[GUI]] の階層メニューに写像しています。


[28]
[CITE@zh-TW[求助!人生第一次背包畢業旅行!需要&#24171;忙~~ - 台灣綜合]] ([TIME[2008-06-21 21:08:05 +09:00]] 版) <http://www.backpackers.com.tw/forum/showthread.php?s=015c15c6ce5789f6840e58422e1a6268&t=53965>

>
[PRE(HTML example code)[
			<select name="langid" onchange="switch_id(this, 'lang')">
				<optgroup label="快速語系選擇器">
					<option value="3" class="" >-- English</option>
<option value="1" class="" >-- 簡體中文</option>
<option value="2" class="" selected="selected">-- 繁體中文</option>

				</optgroup>
			</select>
]PRE]

([[名無しさん]])


[[#comment]]


** メモ

[27]
[CITE@ja[optgroup 要素を CSS でひと工夫してみる | WWW WATCH]] ([CODE[2007-05-11 19:54:58 +09:00]] 版) <http://hyper-text.org/archives/2007/05/optgroup_css.shtml>
([[名無しさん]] [WEAK[2007-05-11 10:58:06 +00:00]])


[29] [CITE['''['''whatwg''']''' Browser inconsistencies in rendering <optgroup> and <option>]]
([TIME[2010-10-23 12:58:06 +09:00]] 版)
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-October/028882.html>