HTML Living Standard/datalist

DATALIST要素

<datalist>要素は、<input>要素と組み合わせて、ユーザーが入力フィールドで選択可能な候補値を定義するために使用されます。候補値を提供することで、ユーザーの入力を簡素化し、ミスを減らすことができます。

定義

<datalist>要素は、候補リストを提供する非表示のリストコンテナです。
この要素は、通常<input>要素のlist属性と組み合わせて使用されます。

使用方法

以下は、<datalist>要素の基本的な使用例です。

<label for="browsers">お気に入りのブラウザを選択してください:</label>
<input type="text" id="browsers" name="browser" list="browser-list">
<datalist id="browser-list">
  <option value="Google Chrome">
  <option value="Mozilla Firefox">
  <option value="Microsoft Edge">
  <option value="Safari">
  <option value="Opera">
</datalist>

この例では、ユーザーが<input>フィールドにテキストを入力すると、<datalist>要素内で定義された候補リストが表示されます。

属性

id

候補リストを識別するための一意のIDを指定します。
<input>要素のlist属性でこのIDを参照します。

使用例

ユーザーの選択肢を補助

次の例では、ユーザーが選択可能な都市名のリストを提供しています。

<label for="cities">訪れたい都市:</label>
<input type="text" id="cities" name="city" list="city-list">
<datalist id="city-list">
  <option value="東京">
  <option value="ニューヨーク">
  <option value="パリ">
  <option value="ロンドン">
  <option value="シドニー">
</datalist>

ユーザーが<input>フィールドに文字を入力し始めると、それに一致する候補が表示されます。

数値入力の候補

数値を入力する場合にも<datalist>を使用できます。

<label for="quantity">数量を選択:</label>
<input type="number" id="quantity" name="quantity" list="quantity-list" min="1" max="10">
<datalist id="quantity-list">
  <option value="1">
  <option value="5">
  <option value="10">
</datalist>

注意事項

<datalist>要素内に配置するのは通常<option>要素です。<option>要素のvalue属性を指定することで候補値を提供します。
<datalist>は直接的に表示されません。関連付けられた<input>要素を介して表示されます。
<datalist>はブラウザの実装に依存しており、すべてのブラウザで同じ動作を保証するわけではありません。

利点

ユーザーの入力補助を提供し、入力ミスを減らす。
動的な候補リストをJavaScriptと組み合わせて実装可能。

スタイリング

<datalist>そのものは非表示要素であり、直接スタイリングすることはできません。ただし、<option>要素のスタイリングは一部のブラウザで可能です。

使用上のヒント

入力フィールドで制限された選択肢を提供したい場合に便利です。
JavaScriptで動的に候補を生成し、ユーザーエクスペリエンスを向上させることができます。