* 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]]

* 歴史

** HTML4

[18] [CITE@en[Forms in HTML documents]], [TIME[2013-05-28T21:39:05.000Z]], [TIME[2024-10-11T13:50:58.903Z]] <https://www.w3.org/TR/PR-html40-971107/interact/forms.html#h-17.3.3>


[FIG(data)[ [19] [[HTML要素概説]]

:[F[要素名]]:[CODE[optgroup]]
:日付:[TIME[1997-11-07]]
:説明:
[TIME[1997-11-07]]、
[CITE[HTML 4.0]]
に
[CODE[optgroup]]
が追加された。
:出典:
[REFS[

-
[DFN[HTML4-19971107:forms]]:
[CITE@en[Forms in HTML documents]], 
[DATA(.author)[[[W3C]]]],
[TIME(.published)[1997-11-07]],
[TIME[2013-05-28T21:39:05.000Z]], [TIME[2024-10-11T13:50:58.903Z]] <https://www.w3.org/TR/PR-html40-971107/interact/forms.html#h-17.3.3>

]REFS]

]FIG]


[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]] の階層メニューに写像しています。


[20] [CITE[Optgroup]], [TIME[2005-03-21T01:56:42.000Z]], [TIME[2024-10-11T13:54:05.919Z]] <http://www.blooberry.com/indexdot/html/tagpages/o/optgroup.htm>

[21] [[IE6]]+ とのこと (不具合もあった) [SRC[>>20]] 


[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]


[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]])

** HTML5


[71] 
[CITE@en['''['''''']''' (0) WF2: <optgroup> element summary.]], [[Hixie]], [TIME[2008-09-04 20:11:08 +09:00]], [TIME[2024-09-04T13:09:15.000Z]] <https://github.com/whatwg/html/commit/2984402d970c550bd1508336217345917126a7cc>

[FIG(data)[ [70] [[HTML要素概説]]

:[F[要素名]]:[CODE[optgroup]]
:日付:[TIME[2008-09-04]]
:説明:
[TIME[2008-09-04]]、
[CITE[HTML5]]
に
[CODE[optgroup]]
が追加された。
:出典:
[REFS[

-
[CITE[HTML5 r2151]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2008-09-04 20:11:08 +09:00]], [TIME[2024-09-04T13:09:15.000Z]] <https://github.com/whatwg/html/commit/2984402d970c550bd1508336217345917126a7cc>

]REFS]

]FIG]



[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>

[30] [CITE@en[Web Applications 1.0 r8611 Add some explanatory notes to <optgroup>]]
( ([TIME[2014-05-08 06:07:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8610&to=8611>

[12] [CITE@en[1214164 – Only <options> that are children of <select> or children of <optgroup> children of <select> should be honored]]
([TIME[2015-11-06 18:09:53 +09:00]] 版)
<https://bugzilla.mozilla.org/show_bug.cgi?id=1214164>

[FIG(quote)[
[FIGCAPTION[
[13] [CITE[html5 - Why does IE10's input validation fail for this required select & optgroup structure - Stack Overflow]]
( ([TIME[2016-06-17 12:53:24 +09:00]]))
<http://stackoverflow.com/questions/15821267/why-does-ie10s-input-validation-fail-for-this-required-select-optgroup-struct>
]FIGCAPTION]

> value="0" on the optgroup elements did the trick with my issue too. 

]FIG]


[14] [CITE@en[Editorial: Cross-reference DOM "child" where appropriate in rendering]]
([[zcorpan]]著, [TIME[2016-09-20 20:16:41 +09:00]])
<https://github.com/whatwg/html/commit/e8c91c05edc8d6cdb33fdd5452e052359d40490b>

[15] [CITE[WAI-HC SELECT grouping proposal]]
([TIME[2017-05-23 00:43:50 +09:00]])
<https://www.w3.org/WAI/PF/select-proposal.html>

[16] [CITE[HTML4/CSS2 Accessibility Recommendations]]
([TIME[2017-05-23 00:44:21 +09:00]])
<https://www.w3.org/WAI/PF/guide.html#OPTION>

[17] [CITE@en[Clarify disabled for option/optgroup is defined separately]]
([[annevk]]著, [TIME[2018-01-29 03:15:17 +09:00]])
<https://github.com/whatwg/html/commit/8d60f070d6ba6b5c7dfbc116fd9d3faee5d9c96e>