Datalist要素を使用した事前定義入力候補の提供

HTMLの<datalist>要素は、<input>要素に対してあらかじめ定義された選択肢のリストを作成するために使用。ユーザーはリストから選択することも、自分で値を入力することも可能。定義済みの値のリストは、関連するテキストフィールドに入力を始めるまで表示されない。<datalist>はid属性と組み合わせて使用し、<input>はlist属性でこれにリンクする。

<datalist>要素は、ユーザーに役立つ候補を提示しつつ、選択肢を固定しない場合に有用。

例

ユーザーがフィールドに入力すると、ブラウザはあらかじめ定義されたカテゴリを表示します。一致するものがない場合でも、ユーザーは独自の値を入力できます。

• <label for="category">: 入力フィールドの目的を説明;
• <input type="text" name="category" id="category" list="categories"/>: 関連付けられたdatalistから候補を表示するテキストフィールド;
• <datalist id="categories">: 入力中にヒントとして表示されるあらかじめ定義された選択肢を含む要素;
• <option value="...">: 各候補項目を表す。