「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>

結果
入力欄に「東」と入力すると、入力候補に「東京都市」が表示されます。

HTML5

Posted by arkgame