input
要素 list
属性 (HTML)[4]
HTML の input
要素の list
属性は、
候補値のリストを参照するために使うことができます。
[5] 仕様書:
datalist
element and the list
attribute
<IW:WF2:"#the-datalist">[8]
list
属性は、
その制御子用の著者指定の自動補完のリストの要素を指定します。
WF2 2.12
[7]
利用者エージェントは、 list
属性により指定された並びに含まれる値を、
(通常の) 任意の値に加えて利用者が選択できるように提示するべきです。
WF2 2.12
[8]
指定された要素は、 list
属性の値を getElementById
メソッドの引数として与えた時に返される要素です。
そのような要素が文書中にない場合や、
HTML (XHTML) の select
要素か datalist
要素でない場合は、無視しなければなりません。
WF2 2.12
[9]
自動補完のリストは、 list
で参照された定義済みの値の他に、
利用者エージェント依存の値を追加して構いません。
例えば、以前に利用者が入力した値を覚えておいて、
それを提示して構いません。 WF2 2.12
[10]
利用者エージェントは自動補完のリストに、
妥当性検証を通過するようなものだけを示すことが推奨されます。
例えば、 pattern
属性があれば、
そのパターンに一致する値のみを示すのがよいです。
WF2 2.12
<input type="url" name="location" list="urls"> <datalist id="urls"> <option label="MIME: Format of Internet Message Bodies" value="http://www.ietf.org/rfc/rfc2045"> <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/"> <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint"> <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/"> <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html"> <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/"> </datalist>
利用者が www.w3 とまで入力した場合のレンダリング例: <http://www.whatwg.org/specs/web-forms/current-work/sample-autocompletion-ui-1>
+-------------------------------------------------------------+-+ | www.w3| |v| +-------------------------------------------------------------+-+ | http://www.w3.org/TR/xforms/sli... Form Controls | | http://www.w3.org/TR/html4/ HTML 4.01 Specification | | http://www.w3.org/TR/SVG/ Scalable Vector Graph... | | http://www.w3.org/TR/SVG/featur... Feature Sets - SVG 1.... | | http://www.w3.org/Consortium/#m... | | http://www.w3.org/TR/XForms/ | +---------------------------------------------------------------+
ただし、利用者が最近
http://www.w3.org/Consortium/#membership
と
http://www.w3.org/TR/XForms/
をみていたとしています。
最初の4つの URI は、著者が指定したリストからのものです。 最後の2つの URI は、利用者エージェントが履歴から追加したものです。
WF2 2.12
[12] 互換性に配慮した例
<p> <label> Enter a breed: <input type="text" name="breed" list="breeds"> <datalist id="breeds"> <option value="Abyssinian"> <option value="Alpaca"> <!-- ... --> </datalist> </label> </p>
選択肢が補助的なもので、そう重要度が高くないなら、
この例のように datalist
要素を使い、 option
は内容ではなく value
を使って指定すれば、 Web Forms 2.0
に対応していない利用者エージェントは選択肢をレンダリングしません。
WF2 2.12
[13] 互換性に配慮した例
<p> <label> Enter a breed: <input type="text" name="breed" list="breeds"> </label> <datalist id="breeds"> <label> or select one from the list: <select name="breed"> <option value=""> (none selected) <option>Abyssinian <option>Alpaca <!-- ... --> </select> </label> </datalist> </p>
選択肢が比較的重要で、 Web Forms 2.0
に対応してない利用者エージェントでもレンダリングさせたければ、
この例のように datalist
内に select
を入れ、その中に選択肢の option
を入れることができます。
Web Forms 2.0 に対応した利用者エージェントでは、
datalist
の内容は直接レンダリングされません。
[14] 数値範囲選択の候補の例
<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers"> <datalist id="powers"> <option value="0"> <option value="-30"> <option value="30"> <option value="+50"> </datalist>
input { height: 75px; width: 49px; background: #D5CCBB; color: black; }
レンダリング例: <http://www.whatwg.org/specs/web-forms/current-work/sample-autocompletion-ui-2>
スライダー制御子で、
datalist
で指定された値に印が入っています。
例えば、光度や速度で指定可能な範囲があって、 その中に幾つか典型的な値があるときに使うと便利です。
WF2 2.12
[15] (X)HTML5 Tracking ( 版) <http://html5.org/tools/web-apps-tracker?from=2375&to=2376>
[16] Web Forms 2.0 ( 版) <http://www.whatwg.org/specs/web-forms/current-work/#list0>
[1] Make forms work in shadow trees ( (annevk著, )) <https://github.com/whatwg/html/commit/927fda0f305452a9c54a25d3ebf9a6ed5ae29fd3>