「HTML5」datalist要素で 入力欄に入力候補を表示する
環境
Windows 10 home 64bit
Google Chrome 103.0.5060.66
構文
HTMLの<datalist> 要素は、他のコントロールで利用可能な値を表現する一連の <option> 要素を含みます。
datalistタグのid属性が、input要素のlist属性と紐付きます。
入力候補は、option要素で記述します。
使用例
<!DOCTYPE html>
<html>
<head>
<title>datalist要素のサンプル</title>
</head>
<body>
<body>
<label for="city">一覧から都市を選択して下さい:</label>
<input list="cityLst" id="city" name="city" />
<datalist id="cityLst">
<option value="東京都市"></option>
<option value="大阪都市"></option>
<option value="福岡名産"></option>
<option value="川崎テスト"></option>
</datalist>
<body>
</body>
</html>
結果
入力欄に「東」と入力すると、入力候補に「東京都市」が表示されます。