レンダリング

[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

例

[11]

<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 で指定された値に印が入っています。

例えば、光度や速度で指定可能な範囲があって、 その中に幾つか典型的な値があるときに使うと便利です。

+50 は非妥当な値なので、無視しています。

WF2 2.12