Edit

Page

Page title:

Page body:

[1] [[HTML]] の [DFN[[CODE(HTMLe)[option]] 要素]]は、
メニュー制御子 ([CODE(HTMLe)[[[select]]]]) の選択肢を表します。

[2] 仕様書:
- [[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">
- [[Web Forms 2.0]]
-- [CSECTION@en[2.18. Handling unexpected elements and values]]
<IW:WF2:"#handling">

[3] 
:[[開始タグ]]:必須
:[[終了タグ]] (HTML 4):省略可能
:終了タグ (XHTML 1):必須
:出現できる文脈:[CODE(HTMLe)[[[select]]]] 要素や
[CODE(HTMLe)[[[optgroup]]]] の子供として任意個
:[[内容模型]]:[CODE(SGML)[#[[PCDATA]]]]
:[[属性]]:
,属性名	,属性値	,既定値	,説明	,出典
,[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)[[[selected]]]]	,(真偽値属性)	,(偽)	,初期選択	,[HTML 4]
,[CODE(HTMLa)[[[style]]]]	,	,	,スタイル情報	,"[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] [[Style]] ⊂ Common"
,[CODE(HTMLa)[[[title]]]]	,	,	,注釈的題	,"[HTML 4] %coreattrs ⊂ %attrs, [XHTML 1] Core ⊂ Common"
,[CODE(HTMLa)[[[value]]]]	,	,(内容)	,値	,[HTML 4]

** フォーム

[4] '''誤り処理'''

[[フォーム制御子]]としての[[値]]は、
明示的に指定されない場合 ([[内容]]が用いられる場合)
は、 [CODE(DOMa)@en[[[textContent]]]] [[DOM属性]]の値により初期化[['''しなければなりません''']]。
[SRC@en[WF2 2.18]]

[[#comment]]

** レンダリング

[5] '''誤り処理'''

[[テキスト節点]]以外が含まれる場合、
どう[[レンダリング]]されるべきかは未定義です。
実用上、2つの可能性があります:
- [6] [[フォーム制御子]]外の場合と同じように、
通常通り[[レンダリング]]する
- [7] [[初期値]] ([CODE(DOMa)@en[[[defaultValue]]]])
のみを[[レンダリング]]し、他の内容は
([[CSS]] により特に指定されない限り) 
[[レンダリング]]しない

[SRC@en[WF2 2.18]]

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

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

* [CODE(DOMi)@en[HTMLOptionElement]] インターフェイス

:[[界面名]]:[CODE(DOMi)@en[[[HTMLOptionElement]]]] [SRC@en[[[DOM1 HTML]], [[DOM2 HTML]], [[HTML5]]]]
:旧 [[JavaScript]] 名:[CODE(DOMi)@en[[[Option]]]] [SRC@en[[[JavaScript 1.0]]]]
:[[親界面]]:[CODE(DOMi)@en[[[HTMLElement]]]]
: [[要素]]:[CODE(HTMLe)@en[[[option]]]]

[FIG(list)[
,[CODE(DOMa)@en[[[defaultSelected]]]],"[CODE(DOMi)@en[[[Option]]]] ([[JavaScript 1.1]]), [[HTML5]]"
,[CODE(DOMa)@en[[[disabled]]]],[[HTML5]]
,[CODE(DOMa)@en[[[form]]]],[[HTML5]]
,[CODE(DOMa)@en[[[index]]]],[[HTML5]]
,[CODE(DOMa)@en[[[label]]]],[[HTML5]]
,[CODE(DOMa)@en[[[length]]]],[[Opera]]
,[CODE(DOMa)@en[[[selected]]]],"[CODE(DOMi)@en[[[Option]]]] ([[JavaScript 1.0]]), [[HTML5]]"
,[CODE(DOMa)@en[[[text]]]],"[CODE(DOMi)@en[[[Option]]]] ([[JavaScript 1.0]]), [[HTML5]]"
,[CODE(DOMa)@en[[[value]]]],"[CODE(DOMi)@en[[[Option]]]] ([[JavaScript 1.0]]), [[HTML5]]"
]FIG]

[11] [[Opera]] にはなぜか [CODE(DOMa)@en[[[length]]]] がありますが ([CODE(HTMLe)@en[[[select]]]]
の [CODE(DOMa)@en[[[length]]]] と同じものを返す)、 [CODE@en[[[IndexGetter]]]]
はないみたいです。

;; [CITE[<option>'''['''0''']''']] ([TIME[2008-12-27 12:34:22 +09:00]] 版) <http://suika.fam.cx/~wakaba/-temp/test/dom/html-option-element/index-getter/index-1.html>

[12] [[WinIE7]] で [CODE(JS)@en[[[new]] [[Option]]]] 
して作った [CODE(HTMLe)@en[[[option]]]] [[要素]]を
[CODE(DOMm)@en[[[appendChild]]]] しても、なぜか[[選択肢]]の[[名札]]は何も表示されません。
[CODE(DOMa)@en[[[innerHTML]]]] にも[[名札]]に相当する文字列はでてきません。
そのせいでしょうか。
そういえば [CODE(DOMa)@en[[[text]]]] [[DOM属性]]がある[[要素]]の扱いが [[IE]]
[[DOM]] では特殊なのと関係あるかもしれません。

;; [CODE(DOMm)@en[[[add]]]] など [[DOM0]] 的方法で追加するのは[[名札]]も含めてうまくいきます。

[13] [CITE@en[Web Applications 1.0 r7785 Option constructor: clean up to use more WebIDL features, behave more like IE for the first argument. Add some rationale for Web Storage disk quota suggestions.]]
( ([TIME[2013-04-02 02:57:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7784&to=7785>

[14] [[Chrome]] では [CODE(JS)[document.createElement ('option') instanceof HTMLOptionElement]]
は[[真]]ですが、
[COD(JS)[document.createElement ('option') instanceof Option]] 
は[[偽]]です。 [[Firefox]]、[[WinIE9]] では後者も[[真]]です。 [TIME[2014-07-17T01:16:48.900Z]]

;; [15] [CODE(DOMi)@en[[[Image]]]] や [CODE(DOMi)@en[[[Audio]]]] でも同じです。

;; [16] [CODE(JS)[HTMLOptionElement === Option]] はどのブラウザーでも[[偽]]です。

* [CODE(DOMi)@en[Option]] コンストラクター

[17] 
,([CODE(JS)@en[[[new]] [[Option]] ()]]),"[CODE(DOMi)@en[[[Option]]]] ([[JavaScript 1.0]]), [[HTML5]]"

* 歴史

** HTML5

[71] 
[CITE@en['''['''''']''' (0) WF2: <option> element summary.]], [[Hixie]], [TIME[2008-09-04 20:23:40 +09:00]], [TIME[2024-09-04T13:10:19.000Z]] <https://github.com/whatwg/html/commit/bf9bca6fb670a4318e28bb39edcfcdb7b85258aa>

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

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

-
[CITE[HTML5 r2152]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2008-09-04 20:23:40 +09:00]], [TIME[2024-09-04T13:10:19.000Z]] <https://github.com/whatwg/html/commit/bf9bca6fb670a4318e28bb39edcfcdb7b85258aa>

]REFS]

]FIG]

[172] [CITE[IRC logs: freenode / #whatwg / 20100926]]
( ([TIME[2010-10-10 13:13:29 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20100926>

[173] [CITE[IRC logs: freenode / #whatwg / 20110803]]
( ([TIME[2011-08-14 00:58:16 +09:00]] 版))
<http://krijnhoetmer.nl/irc-logs/whatwg/20110803>

[174] [CITE@en[Web Applications 1.0 r7786 fix mistake in previous checkin; and fix mistake in much earlier checkin...]]
( ([TIME[2013-04-02 03:02:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7785&to=7786>

[175] [CITE[HTML - IE と <option> - Qiita ''''''[''''''キータ'''''']'''''']]
( ([TIME[2013-07-01 03:45:08 +09:00]] 版))
<http://qiita.com/wakaba@github/items/c62fba79cbc5cec42251>

[176] [CITE@en[Web Applications 1.0 r8147  Change how the content models of <title> and <option> are defined (move from prose additions to more formal content model descriptions, and tighten up the requirements)]]
( ([TIME[2013-08-20 10:35:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8146&to=8147>

[177] [CITE@en[Web Applications 1.0 r8297     Move more towards the browsers for <option> selectedness vs dirtiness. This doesn't quite match any browser exactly, so all browsers would have to change to match it. If there's a reason (e.g. backcompat) to prefer a different model, please reopen the bug and let me know.]]
( ([TIME[2013-11-20 05:20:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8296&to=8297>

[178] [CITE@en[Web Applications 1.0 r8341     Updates for r8297, fixing <option> to treat 'dirtiness' correctly, and r8336, fixing 'error' events sent to MessagePort objects to not race messages sent from those ports (or, worse, the event that the port is delivered on...).]]
( ([TIME[2013-12-12 02:41:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=8340&to=8341>

[179] [CITE[ncsa-mosaic/CHANGES at master · alandipert/ncsa-mosaic]]
( ([TIME[2014-04-07 05:27:34 +09:00]] 版))
<https://github.com/alandipert/ncsa-mosaic/blob/master/CHANGES#L114>

[8] [CITE@en[''''''[''''''giow'''''']'''''' (3) option.text needs to exclude script nodes, for compat reasons · whatwg/html@b1adc35]]
([TIME[2016-03-10 10:28:54 +09:00]] 版)
<https://github.com/whatwg/html/commit/b1adc35035eff05e6177d11cc5e564934a0cc977>

[9] [CITE@en[19549 – option.text should skip script elements]]
([TIME[2016-03-10 10:29:28 +09:00]] 版)
<https://www.w3.org/Bugs/Public/show_bug.cgi?id=19549>

[10] [CITE@en[Make label-less empty option OK if datalist child · whatwg/html@3885f11]]
([TIME[2016-03-13 21:12:58 +09:00]] 版)
<https://github.com/whatwg/html/commit/3885f11503431c1bb33c3bb4bf1b9d5d9bcdae61>

[18] [CITE@en[Fix the owner document for all element constructors]]
( ([[domenic]]著, [TIME[2016-05-03 06:57:30 +09:00]]))
<https://github.com/whatwg/html/commit/c9d898386d7b79cf1c7e104b5768e393c924078f>

[19] [CITE@en[Allow all HTML element constructors to be subclassed]]
([[domenic]]著, [TIME[2016-06-12 16:34:15 +09:00]])
<https://github.com/whatwg/html/commit/4742b18559a6968213b680ea0b0521eae17de7e1>

[20] [CITE@en[Element containers for OPTION elements are hard.]]
([[shs96c]]著, [TIME[2017-02-27 19:28:39 +09:00]])
<https://github.com/w3c/webdriver/commit/6a8fa1ef8e71d6fdee43ad980e4aa9c75fe33083>

[21] [CITE@en[169296 – Label of an <option> element should not be displayed in quirks mode]]
([TIME[2017-04-19 10:24:45 +09:00]])
<https://bugs.webkit.org/show_bug.cgi?id=169296>

[22] [CITE@en[40545 - (option-label) LABELs don't work for OPTIONs (<option label> in selects)]]
([TIME[2017-04-19 10:26:07 +09:00]])
<https://bugzilla.mozilla.org/show_bug.cgi?id=40545>

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

[24] [CITE[javascript - iOS safari not showing all options for select menu - Stack Overflow]]
([TIME[2020-08-13 14:58:25 +09:00]])
<https://stackoverflow.com/questions/35021620/ios-safari-not-showing-all-options-for-select-menu/41749701>

[25] [[iOS]] の [[Safari]] は
[CODE[label][<option label>]]
[[属性]]に対応していない。
っていつの時代だよ、糞すぎるにも程があるだろ!
これが寡占の弊害やな
[TIME[2020-08-13T05:59:59.800Z]]

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)