optgroup 要素型 (HTML, XHTML 1)

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

[3] 仕様書:

[4]

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

内容

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

空要素

[7] HTML 4 では、子要素として option が1つ以上必要でした。 HTML 4 17.6.1

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

入れ子

[10] Web Forms 2.0 によれば、 optgroup 内に optgroup を入れることができます。 WF2 2.3

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

メモ

レンダリング

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

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

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

[11] 誤り処理

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

[11] select 外

select 要素外の option は、 span と同じようにレンダリングするべきです。 WF2 2.18

歴史

HTML4

[18] Forms in HTML documents, , https://www.w3.org/TR/PR-html40-971107/interact/forms.html#h-17.3.3

[19] HTML要素概説
要素名
optgroup
日付
説明
、 HTML 4.0 に optgroup が追加された。
出典
  • HTML4-19971107:forms: Forms in HTML documents, , , , https://www.w3.org/TR/PR-html40-971107/interact/forms.html#h-17.3.3

[5] 階層メニューの例 HTML 4 17.6.1

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

この例では、選択肢は次のような階層構造になっています。

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

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

[20] Optgroup, , http://www.blooberry.com/indexdot/html/tagpages/o/optgroup.htm

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

[28] 求助!人生第一次背包畢業旅行!需要&#24171;忙~~ - 台灣綜合 ( 版) http://www.backpackers.com.tw/forum/showthread.php?s=015c15c6ce5789f6840e58422e1a6268&t=53965

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

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

HTML5

[71] [] (0) WF2: <optgroup> element summary., Hixie, , https://github.com/whatwg/html/commit/2984402d970c550bd1508336217345917126a7cc

[70] HTML要素概説
要素名
optgroup
日付
説明
、 HTML5 に optgroup が追加された。
出典
  • HTML5 r2151, , , https://github.com/whatwg/html/commit/2984402d970c550bd1508336217345917126a7cc

[29] [whatwg] Browser inconsistencies in rendering <optgroup> and <option> ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2010-October/028882.html

[30] Web Applications 1.0 r8611 Add some explanatory notes to <optgroup> ( ( 版)) http://html5.org/tools/web-apps-tracker?from=8610&to=8611

[12] 1214164 – Only <options> that are children of <select> or children of <optgroup> children of <select> should be honored ( 版) https://bugzilla.mozilla.org/show_bug.cgi?id=1214164

[13] html5 - Why does IE10's input validation fail for this required select & optgroup structure - Stack Overflow ( ()) http://stackoverflow.com/questions/15821267/why-does-ie10s-input-validation-fail-for-this-required-select-optgroup-struct

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

[14] Editorial: Cross-reference DOM "child" where appropriate in rendering (zcorpan著, ) https://github.com/whatwg/html/commit/e8c91c05edc8d6cdb33fdd5452e052359d40490b

[15] WAI-HC SELECT grouping proposal () https://www.w3.org/WAI/PF/select-proposal.html

[16] HTML4/CSS2 Accessibility Recommendations () https://www.w3.org/WAI/PF/guide.html#OPTION

[17] Clarify disabled for option/optgroup is defined separately (annevk著, ) https://github.com/whatwg/html/commit/8d60f070d6ba6b5c7dfbc116fd9d3faee5d9c96e