ywork2020.com

Title

リスト属性を使えば、入力候補のリストを作成することができる

list属性の概要

input要素-text型などのテキストコントロール要素にlist属性を指定する事で入力候補をリスト表示すると共に選択入力ができるようになります。
実際のテキスト入力はリストからの選択だけではなく、任意のテキストも入力する事ができます。
入力候補の項目は、あらかじめdatalist要素で作成して置く必要があります。

値には、datalist要素に指定したID名を記述します。

実機サンプル

プログラミング・コース選択:

サンプルコード

<body>
	<form>
		プログラミング・コース選択:<br>
		<input type="text" name="example" list="idList">
		<datalist id="idList">
			<option value="HTML"></option>
			<option value="CSS"></option>
			<option value="javaScript"></option>
			<option value="SQL"></option>
			<option value="jQuery"></option>
		</datalist>
	</form>
</body>