webmas.jp

<datalist> は入力候補のリストを作成する際に使用します。リストの候補は <datalist> 内に <option> 要素を配置して作成します。

分類

フローコンテンツ、フレージングコンテンツ

内包できるもの

フレージングコンテンツ または0個以上の <option> 要素

属性

id=””

リストと入力欄を関連付けるための ID

リストと入力欄を関連付けるための ID

<datalist> に id 属性を指定し、入力候補のリストと入力欄を関連付けます。id で関連付けされていると入力欄をクリックした時にリストが選択できるようになります。

サンプル

<label>一覧から選択：</label>
<input list="list001" />

<datalist id="list001">
<option value="選択肢1"></option>
<option value="選択肢2"></option>
<option value="選択肢3"></option>

代替コンテンツを記入することもできます。 datalist 要素に対応しているブラウザでは表示されません。
</datalist>

プレビュー

一覧から選択：

<select> 要素と似たような挙動になりますが、すでにどれかのリストが選択されているときは別の選択肢は出てこなくなります。すべてのリストを表示するには入力欄の文字列を消去する必要があります。このことから基本的にはユーザーが自分で入力するフォームで、その中である程度の候補を表示して入力の補佐をするような使い方に向いています。