datalist要素の使い方！入力候補リストを作る【HTML】

datalist要素を使って、ユーザーのために入力候補のリストを用意することができます。

たとえば上のテキストエリアに「h」と入力するかダブルクリック、もしくは矢印をクリックしてみてください。（スマホでは使えないですが。。）

ユーザーが「HTML」のことを検索するのが前提で、「HTML 基本」とか「HTML 初心者」などの言葉を入力候補として用意しています。

ちなみにコードは以下のように記述しています。

datalist要素のid属性とinput要素のlist属性の値で関連づけているので、これらには同じ値を指定する必要があります。（任意の値を指定できます。）

関連付けられたinput要素において、datalist要素で定義した入力候補が表示されるような仕組みになっているんです。

また、入力候補の選択肢はoption要素で指定します。

option要素はselect要素などの子要素としても使うことができ、詳しくは『option要素はセレクトボックスの選択肢を指定する【HTML】』を確認してみてください。