HTML / 要素

datalist要素の使い方

HTMLのdatalist要素は、inputに入力候補を表示するための要素です。候補を参考にしながら、候補にない文字も入力できます。

先に結論

datalistは、入力欄に「よく使う値の候補」を付ける仕組みです。inputのlist属性と、datalistのidを同じ値にして関連付けます。

候補は入力を強制するものではありません。候補以外の値を禁止したい場合は、selectやrequired・patternなどの検証ルールを別に検討します。

最小の例

<label for="browser">ブラウザー</label>
<input id="browser" name="browser" list="browser-options">

<datalist id="browser-options">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

input[list]の値とdatalist[id]の値が一致しているため、ブラウザーは入力欄に候補を表示できます。datalist自体は通常の本文に一覧として表示されません。

ブラウザー

入力欄を選ぶと、ブラウザーによって候補を開くボタンや候補一覧が表示されます。候補を選んでも、入力欄にはその値が入るだけです。候補にない「別のブラウザー名」も入力できます。

selectとの違い

目的	向いている要素	入力できる値
用意した選択肢から必ず選んでもらう	`select` + `option`	基本的に選択肢の中から選ぶ
入力を助ける候補を見せる	`input` + `datalist`	候補以外も入力できる

たとえば、都道府県を決められた一覧から選ぶならselectが分かりやすいでしょう。一方、検索語や過去に使った名前の候補を示しつつ、新しい値も受け付けるならdatalistが候補になります。

候補の値を書く

optionのvalueが、候補を選んだときにinputへ入る値です。処理で使う値を分かりやすくするため、候補の本体となる値はvalueに明示します。

<label for="country">国</label>
<input id="country" name="country" list="countries">
<datalist id="countries">
  <option value="日本" label="Japan"></option>
  <option value="アメリカ合衆国" label="United States"></option>
</datalist>

labelの見え方や候補の開き方はブラウザーによって異なることがあります。重要な情報をlabelだけに置かず、入力されるvalueと通常の説明文でも伝えましょう。

入力を必須・限定にする場合

datalistを付けただけでは、入力は必須にならず、候補外の値も無効になりません。必須ならrequired、形式を制限するならpatternなど、目的に合った検証をinputへ追加します。

<label for="ticket">チケット番号</label>
<input id="ticket" name="ticket" list="tickets"
       pattern="T-[0-9]{4}" required>
<datalist id="tickets">
  <option value="T-1024"></option>
  <option value="T-2048"></option>
</datalist>

この例では候補を表示しながら、入力が空でないことと、T-数字4桁の形式をブラウザーに確認させます。サーバー側でも同じ値を検証してください。

読みやすく、使いやすくする

入力欄には、何を入力するか分かるlabelを関連付ける。
候補は短く、入力の助けになる範囲に絞る。
placeholderだけを説明として使わず、画面上の説明文も用意する。
候補がない場合や候補外の値を受け付けない場合は、datalistだけで解決しようとしない。
候補の表示・キーボード操作・支援技術での伝わり方はブラウザーで確認する。

よくある間違い

list属性の値とdatalistのidが違う。関連付けが成立しません。
datalistをselectの代わりに使い、候補外入力も無効だと思い込む。
optionの表示文字を頼りにし、入力される値をvalueで明示しない。
候補一覧が表示される見た目だけを確認し、キーボードや支援技術での操作を確認しない。

Atlasで確認する

datalistのcontent model、候補になるoptionの条件、inputとの関連付け、DOM API、ブラウザー実装、アクセシビリティマッピングまで確認したい場合は、Yugien Atlasのdatalist要素を参照してください。入力欄の型とフォーム検証はAtlasのinput要素、候補の意味はAtlasのoption要素でも確認できます。