<datalist>タグは、フォームの入力欄などで入力候補となるデータリストを定義します。
各データのリスト項目は、<option>タグで定義します。
<datalist>タグをサポートしたブラウザでは、
<option>タグで指定された値がユーザーに対して入力候補として提案表示されます。
<datalist>タグを使って作成するインターフェースの具体的な例を挙げると、
検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。
この場合、キーワードの入力欄は<input>タグで作成しますが、
<input>タグのlist属性の値と、
<datalist>タグのid属性の値を同じにして、入力欄とデータリストを関連付けます。
<datalist>～</datalist>の内容は、その子要素も含めてブラウザ上では表示されないことになっています。
datalist要素は、HTML5から新たに追加された要素です。
<form>
<fieldset>
<input type=”search” name=”q” autocomplete=”on” list=”keywords”>
<datalist id=”keywords”>
<option value=”ウィキペディア”>
<option value=”ウィルス対策”>
<option value=”ウィンドウズ”>
</datalist>
<input type=”submit” value=”送信”>
</fieldset>
</form>
