list=""

list=""

input 要素 list 属性 (HTML)

[4] HTMLinput 要素list 属性は、 候補値のリストを参照するために使うことができます。

[6]

状態
WHATWG WD
要素型
input
type
text, email, url, 日付系, 時刻系, number, range
属性名
list (値の list (並び) より)
属性値
既定値

[5] 仕様書:

レンダリング

[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/#membershiphttp://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

メモ

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