<datalist> 入力欄に候補となる選択肢を提供する

<datalist>タグの説明

<datalist>は、フォームの入力欄に入力候補となる選択肢を提供するために使用します。例えば、<input>で作られたテキストエリアに、予め予想される内容の入力候補を指定しておくことができます。

入力候補となるデータは、<datalist>の子要素に<option>を記述することによって定義します。そして、<input>のlist属性と<datalist>のid属性の値を同じ文字列にすることで関連付けることができます。

<datalist>の範囲内に記述された内容は、ユーザーが操作しない限りブラウザ上の見た目には表示されません。

<datalist>タグの特徴

• レイアウトの初期値はインラインです。文章の改行には影響を与えません。
• 視覚的な効果は特に与えられませんが、ユーザーが操作した場合にポップアップリストなどが表示されます。
• 同一のページ内に複数使うことができます。ただし、この要素自体を入れ子にすることはできません。

<datalist>に指定できる主な属性

グローバル属性

全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。

イベントハンドラ

全てのHTML要素に指定できるコンテンツ属性です。

<datalist>の使い方とサンプル

このタグを使ったマークアップのサンプルです。対応しているブラウザでは、入力項目にフォーカスした時に<datalist>へ格納した<option>の内容が表示されます。

<form>
	<input type="search" name="q" autocomplete="on" list="keywords">
	<datalist id="keywords">
		<option value="キーワード候補 1">
		<option value="キーワード候補 2">
		<option value="キーワード候補 3">
	</datalist>
	<input type="submit" value="検索">
</form>