datalist要素

datalist要素は、入力欄に入力する候補のリストを表す要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル フレージング・コンテンツ、もしくは、０個以上のoption要素。
属性 グローバル属性。
ブラウザ対応

構文

<datalist></datalist>

要点

  • datalist要素は、入力欄に入力する候補のリストを表す要素である。
  • datalist要素内に、選択肢を表すoption要素を配置する。
  • datalist要素のid属性値を、入力欄を表すinput要素のlist属性に指定することで、データリストと入力欄を関連付ける。

サンプルコード

１行テキスト入力欄： <input type="text" list="sampleDatalistId">
<datalist id="sampleDatalistId">
	<option value="選択肢１"></option>
	<option value="選択肢２"></option>
	<option value="選択肢３"></option>
</datalist>

サンプル

HTMLソースコード

<p>
	<label>
		１行テキスト入力欄：
		<input list="sampleDatalist">
	</label>
	<datalist id="sampleDatalist">
		<option value="選択肢Ａ"></option>
		<option value="選択肢Ｂ"></option>
		<option value="選択肢Ｃ"></option>
	</datalist>
</p>

実際の表示