＜datalist要素＞ - データリスト

公開日: 2017/02/09

datalist要素は、データリストを作成するための要素です。テキスト入力フォームと関連付ければ、サジェストを実装できます。

概要

名前

datalist (Data list)

カテゴリー

Flow content

Phrasing content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

または、0個以上のoption要素。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLDataListElement

デフォルトのスタイル

datalist {
	display: none;
}

仕様書

https://html.spec.whatwg.org/multipage/forms.html#the-datalist-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

説明

datalist要素は、テキスト入力フォームのサジェストを実装するための要素です。まずは、一覧を作成しましょう。option要素が個々の項目となります。そして、id属性がこのデータリストの名前となります。

HTML

<!-- syncerという名前のデータリスト -->
<datalist id="syncer">
	<option>ABCDEFG</option>
	<option>あいうえお</option>
	<option>かきくけこ</option>
</datalist>

input要素のlist属性にデータリストの名前を指定すれば、関連付けて、サジェストを実装できます。

HTML

<!-- テキスト入力フォーム -->
<input type="text" list="syncer">

<!-- syncerという名前のデータリスト -->
<datalist id="syncer">
	<option>ABCDEFG</option>
	<option>あいうえお</option>
	<option>かきくけこ</option>
</datalist>

label属性を付けると、補助情報のような形で、選択時に表示されます。

HTML

<!-- テキスト入力フォーム -->
<input type="text" list="syncer">

<!-- syncerという名前のデータリスト -->
<datalist id="syncer">
	<option label="abcdefg">ABCDEFG</option>
	<option>あいうえお</option>
	<option label="カキクケコ">かきくけこ</option>
</datalist>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜datalist要素＞ - データリスト</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/datalist/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>datalist要素は、データリストを作成するための要素です。サジェストを実装できます。</p>

<form action="./form.php">
	<p><input name="prefecture" list="syncer"></p>
	<p><button>内容を送信</button></p>
</form>

<datalist id="syncer">
	<option label="シンカー">SYNCER</option>
	<option label="あいうえお">アイウエオ</option>
	<option label="イロハニホヘト">いろはにほへと</option>
</datalist>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/656/"> <meta charset="utf-8"> <title>【デモ】＜datalist要素＞ - データリスト</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/datalist/"> </head> <body>

<p>datalist要素は、データリストを作成するための要素です。サジェストを実装できます。</p> <form action="./form.php"> <p><input name="prefecture" list="syncer"></p> <p><button>内容を送信</button></p> </form> <datalist id="syncer"> <option label="シンカー">SYNCER</option> <option label="あいうえお">アイウエオ</option> <option label="イロハニホヘト">いろはにほへと</option> </datalist>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>