Edit

Page

Page title:

Page body:

* [CODE(HTMLe)@en[input]] 要素 [CODE(HTMLa)@en[list]] 属性 (HTML)

[4]
[[HTML]] の [CODE(HTMLe)@en[[[input]]]]
[[要素]]の [DFN[[CODE(HTMLa)@en[list]] [[属性]]]]は、
候補値のリストを[[参照]]するために使うことができます。

[6]
:状態:[[WHATWG]] [[WD]]
:[[要素型]]:[CODE(HTMLe)@en[[[input]]]]
:[CODE(DOMa)@en[[[type]]]]:[CODE(HTML)@en[[[text]]]],
[CODE(HTML)@en[[[email]]]], [CODE(HTML)@en[[[url]]]],
[[日付]]系, [[時刻]]系, [CODE(HTML)@en[[[number]]]],
[CODE(HTML)@en[[[range]]]]
:[[属性名]]:[CODE(HTMLa)@en[[[list]]]]
(値の [Q@en[[[list]]]] ([Q[[[並び]]]]) より)
:[[属性値]]:
:[[既定値]]:

[5]
仕様書:
- [[Web Forms 2.0]]
-- [CSECTION@en[2.12. The [CODE(HTMLe)@en[[[datalist]]]] element and the [CODE(HTMLa)@en[[[list]]]] attribute]]
<IW:WF2:"#the-datalist">

** レンダリング

[8]
[CODE(HTMLa)@en[[[list]]]] [[属性]]は、
その[[制御子]]用の[[著者]]指定の[[自動補完]]のリストの[[要素]]を指定します。
[SRC@en[WF2 2.12]]

[7]
[[利用者エージェント]]は、 [CODE(HTMLa)@en[[[list]]]]
[[属性]]により指定された[[並び]]に含まれる[[値]]を、
(通常の) 任意の[[値]]に加えて[[利用者]]が選択できるように提示[['''するべきです''']]。
[SRC@en[WF2 2.12]]

[8]
指定された[[要素]]は、 [CODE(HTMLa)@en[[[list]]]]
[[属性]]の[[値]]を [CODE(DOMm)@en[[[getElementById]]]]
[[メソッド]]の[[引数]]として与えた時に返される[[要素]]です。
そのような[[要素]]が[[文書]]中にない場合や、
[[HTML]] ([[XHTML]]) の [CODE(HTMLe)@en[[[select]]]]
[[要素]]か [CODE(HTMLe)@en[[[datalist]]]]
[[要素]]でない場合は、無視[['''しなければなりません''']]。
[SRC@en[WF2 2.12]]

[9]
[[自動補完]]の[[リスト]]は、 [CODE(HTMLa)@en[[[list]]]]
で[[参照]]された定義済みの値の他に、
[[利用者エージェント]]依存の値を追加[['''して構いません''']]。
例えば、以前に[[利用者]]が入力した値を覚えておいて、
それを提示して構いません。 [SRC@en[WF2 2.12]]

[10]
[[利用者エージェント]]は[[自動補完]]の[[リスト]]に、
[[妥当性検証]]を通過するようなものだけを示すことが推奨されます。
例えば、 [CODE(HTMLa)@en[[[pattern]]]] [[属性]]があれば、
その[[パターン]]に[[一致]]する値のみを示すのがよいです。
[SRC@en[WF2 2.12]]

[[#comment]]

** 例

[11]
[PRE(HTML example code)[
<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>
]PRE]

[[利用者]]が [KBD@en[www.w3]] とまで入力した場合の[[レンダリング]]例:
<http://www.whatwg.org/specs/web-forms/current-work/sample-autocompletion-ui-1>

[PRE(aafig)[
 +-------------------------------------------------------------+-+
 |  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/                                  |
 +---------------------------------------------------------------+
]PRE]

ただし、[[利用者]]が最近
[CODE(URI)@en[[[http://www.w3.org/Consortium/#membership]]]] と
[CODE(URI)@en[[[http://www.w3.org/TR/XForms/]]]]
をみていたとしています。

最初の4つの [[URI]] は、[[著者]]が指定したリストからのものです。
最後の2つの [[URI]] は、[[利用者エージェント]]が[[履歴]]から追加したものです。

[SRC@en[WF2 2.12]]

[12]
'''互換性に配慮した例'''

[PRE(HTML example code)[
<p>
 <label>
  Enter a breed:
  <input type="text" name="breed" list="breeds">
  <datalist id="breeds">
   <option value="Abyssinian">
   <option value="Alpaca">
   
  </datalist>
 </label>
</p>
]PRE]

選択肢が補助的なもので、そう重要度が高くないなら、
この例のように [CODE(HTMLe)@en[[[datalist]]]]
[[要素]]を使い、 [CODE(HTMLe)@en[[[option]]]]
は[[内容]]ではなく [CODE(HTMLa)@en[[[value]]]]
を使って指定すれば、 [[Web Forms 2.0]]
に対応していない[[利用者エージェント]]は選択肢を[[レンダリング]]しません。
[SRC@en[WF2 2.12]]

[13] '''互換性に配慮した例'''
[PRE(HTML example code)[
<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>
]PRE]

選択肢が比較的重要で、 [[Web Forms 2.0]]
に対応してない[[利用者エージェント]]でも[[レンダリング]]させたければ、
この例のように [CODE(HTMLe)@en[[[datalist]]]]
内に [CODE(HTMLe)@en[[[select]]]]
を入れ、その中に選択肢の [CODE(HTMLe)@en[[[option]]]]
を入れることができます。
[[Web Forms 2.0]] に対応した[[利用者エージェント]]では、
[CODE(HTMLe)@en[[[datalist]]]] の[[内容]]は直接[[レンダリング]]されません。

[14] '''数値範囲選択の候補の例'''

[PRE(HTML example code)[
<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>
]PRE]

[PRE(CSS example code)[
input { height: 75px; width: 49px; background: #D5CCBB; color: black; }
]PRE]

[[レンダリング]]例:
<http://www.whatwg.org/specs/web-forms/current-work/sample-autocompletion-ui-2>

[[スライダー]][[制御子]]で、
[CODE(HTMLe)@en[[[datalist]]]] で指定された値に印が入っています。

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

[CODE(HTML)[+50]] は[[非妥当]]な値なので、無視しています。

[SRC@en[WF2 2.12]]

* メモ

[15] [CITE@en[(X)HTML5 Tracking]]
([TIME[2009-08-23 22:07:56 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=2375&to=2376>

[16] [CITE@en-GB-x-Hixie[Web Forms 2.0]]
([TIME[2009-01-05 20:07:15 +09:00]] 版)
<http://www.whatwg.org/specs/web-forms/current-work/#list0>

[1] [CITE@en[Make forms work in shadow trees]]
( ([[annevk]]著, [TIME[2016-05-12 00:45:25 +09:00]]))
<https://github.com/whatwg/html/commit/927fda0f305452a9c54a25d3ebf9a6ed5ae29fd3>

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)