HTML

<datalist> データリスト

詳細を開く 詳細を閉じる

データリスト : <datalist>

  • <datalist>要素は、テキストボックスなどで入力候補となるリストを提供する機能です。
  • HTML5で追加された機能です。
  • 下の例で、テキストボックスに「a」や「b」など入力してみましょう。入力候補が表示されます。
  • 作り方は以下のようになります。
    1. <datalist>要素を使ってデータリストを作ります。また、「id」属性を指定します。(例では"sample")
    2. テキストボックスに「list」属性を追加し、データリストの「id」属性を指定します。(例では"sample")
  • なお、日本語にはうまく対応していません。。。

別ウィンドウで表示

<form action="../aaa.php" method="GET">
	
	<input type="text" list="sample">
	
	<datalist id="sample">
		<option value="apple">
		<option value="banana">
		<option value="carrot">	
		<option value="dog">	
		<option value="egg">	
		<option value="fox">	
		<option value="gorilla">	
		<option value="house">	
		<option value="idea">	
		<option value="jet">	
		<option value="kick">	
		<option value="leon">	
		<option value="moon">	
		<option value="noon">	
	</datalist>

	<input type="submit" value="送信">

</form>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ