サイト制作

HTMLのdatalistは選択肢を固定しない　入力候補とselectの違い

慈愛妃きづな

2026-11-07

この記事には広告・アフィリエイトリンクが含まれます。

よく使う入力値を候補として見せたいときのdatalist。候補以外を入力できる点と、端末ごとの操作確認について説明します。

候補は入力を助けるもの

文字入力欄に、よく使う値の候補が出ると入力の手間を減らせます。datalist要素は、入力欄へ候補の一覧を関連付ける仕組みです。input側のlist属性と、datalist側のidを対応させます。

通常のテキスト入力欄では、候補以外の値を入力することもできます。ここが、用意した項目から選んでもらうselectとの大切な違いです。候補を並べただけで、入力内容の制限や正しさの確認まで済むわけではありません。

候補のoptionにはvalueを指定します。補足の表示にはlabelなどを使えますが、候補の見せ方にはブラウザーによる違いがあります。クリックしたときに入力欄へ入る値はvalueなので、説明文と送信したい値を取り違えないようにしましょう。

表示名がわかりやすいかだけでなく、選んだ後に何が入力されるかも確認すると、思わぬ違いを見つけやすくなります。

datalistは、入力型やブラウザーによって対応や表示が異なります。文字を拡大したときの候補表示や、スクリーンリーダーとの組み合わせにも課題があります。すべての環境で同じように使えると決めつけず、対象の端末で操作を確かめましょう。

候補の外も自由に書いてよい欄なのか、決まった選択肢だけにしたい欄なのか。最初にこの違いを整理すると、datalistを使う目的がはっきりします。