* [CODE(HTMLe)@en[datalist]] 要素 (HTML)
[1] [[HTML]] の [DFN[[CODE(HTMLe)@en[datalist]] [[要素]]]]は、
[CODE(HTMLe)@en[[[input]]]] [[要素]]の入力値の候補のリストを提供します。
[4] [CODE(HTMLe)@en[[[datalist]]]] [[要素]]は、
選択肢を [CODE(HTMLe)@en[[[option]]]] [[要素]]により提供する他に、
[[Web Forms 2.0]] に対応していない[[利用者エージェント]]のための
[[fallback]] の[[内容]]を含めることができます。
[SRC@en[WF2 2.12]]
[2]
:状態:[[WHATWG]] [[WD]]
:[[名前空間URI]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]]
:[[要素型名]]:[CODE(HTMLe)@en[[[datalist]]]]
([Q@en[data list]] ([Q[[[データ]]の[[並び]]]]) より)
:文脈:>>10
:[[内容モデル]]:>>9
:[[開始タグ]]:必須
:[[終了タグ]]:必須
:[[属性]]:
[[共通属性]]、
,[[属性名]],[[属性値]],[[既定値]],説明,状態,出典
,[CODE(HTMLa)@en[[[data]]]],[[URI]],(なし),選択肢,[[WHATWG]] [[WD]],[[Web Forms 2.0]]
[3]
仕様書:
- [[Web Forms 2.0]]
-- [CSECTION@en[2.12. The [CODE(HTMLe)@en[[[datalist]]]] element and the [CODE(HTMLa)@en[[[list]]]] attribute]]
** 文脈
[10]
[CODE(HTMLe)@en[[[datalist]]]] [[要素]]は、
- [[ブロック水準要素]]が認められる場所または
- [CODE(HTMLe)@en[[[select]]]] [[要素]]が認められる場所
で使用[['''して構いません''']]。
[SRC@en[WF2 2.12]]
[[#comment]]
** 内容
[9]
[[著者]]は、 [CODE(HTMLe)@en[[[datalist]]]]
[[要素]]の[[子供]]として、
- [[空]]の [CODE(HTMLe)@en[[[option]]]] [[要素]]と
- [CODE(HTMLe)@en[[[datalist]]]] [[要素]]の[[親]]で認められている[[要素]]
だけを使用[['''しなければなりません''']]。
[SRC@en[WF2 2.12]]
[[#comment]]
* レンダリング
[5]
[[利用者エージェント]]が [CODE(HTMLe)@en[[[datalist]]]]
[[要素]]に対応している場合は、
[[表示]][['''するべきではありません''']]。
[[CSS]] に対応している[[利用者エージェント]]では、
[[利用者エージェント・スタイル・シート]]に次の[[規則]]
(と等価なもの) を含めることによりこれを実現[['''するべきです''']]。
[PRE(CSS code)[
@namespace xh url(http://www.w3.org/1999/xhtml);
xh|datalist { display: none; }
]PRE]
[13] [[Gecko]] は [CODE(HTMLa)@en[[[title]]]] [[属性]]を[[レンダリング]]しません。
(仕様上も特に求められていません。)
[14] [[Gecko]] は [[CSS]] で [CODE(HTMLe)@en[[[datalist]]]] [[要素]]や
[CODE(HTMLe)@en[[[option]]]] [[要素]]に[[スタイル]]を指定していても反映させません。
(仕様上も特に求められていません。)
[15] [[Gecko]] はラベルと値から部分一致でフィルタリングしたものを出しますが、
[[Opera]] は先頭一致でフィルタリングしたものを出します。 [TIME[2011-06-25T04:38:15.800Z]]
[16] [[Gecko]] はラベルだけをレンダリングしますが、 [[Opera]] は両方レンダリングします。
* フォーム
[6]
[[自動補完]]の値の[[並び]]は、
([[制御子]]の [CODE(HTMLa)@en[[[list]]]] [[属性]]で指定された
[CODE(HTMLe)@en[[[datalist]]]] [[要素]]または
[CODE(HTMLe)@en[[[select]]]] [[要素]]で)
[CODE(DOMm)@en[[[getElementsByTagName]]]]
[[メソッド]]に [CODE(HTMLe)@en[[[option]]]]
を指定して得られる[[要素]]
([[XHTML]] では [CODE(DOMm)@en[[[getElementsByTagNameNS]]]]
に [CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]]
と [CODE(HTMLe)@en[[[option]]]])
から作成[['''しなければなりません''']]。
[SRC@en[WF2 2.12]]
[7] >>6 で得た各[[要素]]のうち、
[CODE(HTMLa)@en[[[disabled]]]]
で''ない''ものについて、[[自動補完]]の値は、
[CODE(HTMLa)@en[[[value]]]] [[内容属性]]の値か、
この[[属性]]がなければ、 [CODE(DOMa)@en[[[text]]]]
[[DOM]] [[属性]]の値となります。
[[利用者エージェント]]は、[[利用者界面]]において
[CODE(HTMLa)@en[[[label]]]] [[属性]]の値を示[['''して構いません''']]。
[SRC@en[WF2 2.12]]
[8]
[CODE(HTMLa)@en[[[disabled]]]] な[[要素]]、
[[自動補完]]の値が[[空文字列]]な[[要素]]、
[[自動補完]]の値がその[[制御子]]の [CODE(HTMLa)@en[[[type]]]]
に照らして[[非妥当]]な値である[[要素]]は、
無視[['''しなければなりません''']]。
[SRC@en[WF2 2.12]]
[11] '''[CODE(HTMLe)@en[datalist]] 内のフォーム制御子'''
[CODE(HTMLe)@en[[[datalist]]]] [[要素]]内の[[フォーム制御子]]は、
[[成功]]と[['''してはなりません''']]。
(が、[[利用者エージェント]]は依然として[[フォーム]]に関連付け[['''しなければなりません''']]。)
[SRC@en[WF2 2.12]]
[12]
[CODE(HTMLe)@en[[[datalist]]]] [[要素]]で使う
[CODE(HTMLe)@en[[[option]]]] [[要素]]の[[内容属性]]
[CODE(HTMLa)@en[[[selected]]]]、
[[DOM属性]] [CODE(DOMa)@en[[[form]]]],
[CODE(DOMa)@en[[[selected]]]],
[CODE(DOMa)@en[[[defaultSelected]]]],
[CODE(DOMa)@en[[[index]]]]
が [CODE(HTMLe)@en[[[input]]]] [[要素]]や
[CODE(HTMLe)@en[[[datalist]]]] [[要素]]に影響[['''してはなりません''']]。
[SRC@en[WF2 2.12]]
[[#comment]]
** 例
→ [CODE(HTMLa)@en[[[list]]]]
** メモ
[[#comment]]
* メモ
[17] [CITE[''''''[''''''whatwg'''''']'''''' Why children of datalist elements are barred from constraint validation?]]
( ([TIME[2011-07-30 04:12:06 +09:00]] 版))
[18] [CITE[''''''[''''''whatwg'''''']'''''' Why children of datalist elements are barred from constraint validation?]]
( ([TIME[2012-06-08 08:05:14 +09:00]] 版))