こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
フォームを使ったWebサイトを制作していると、ユーザーにとって「入力しやすい設計」がいかに重要か実感することが多いです。
特に、選択肢が限られている場合は、あらかじめ入力候補を用意しておくことで入力ミスの防止やユーザー体験の向上につながります。
今回は、JavaScriptを使わずに入力候補を表示できる便利なHTMLタグ「input list="datalist"」について詳しく解説していきます。
1. input listとは？
input listは、ユーザーが入力を始めたときに、あらかじめ用意された候補リストをプルダウン形式で表示できるHTMLの機能です。JavaScriptや外部ライブラリを使わなくても、HTMLだけで簡単に実装できるため、初心者でも使いやすいのが特徴です。
2. 基本的な使い方とサンプルコード
以下が基本的な使い方です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
上記コードでは、inputにlist="fruits"と指定することで、datalist id="fruits"にある選択肢が表示されるようになります。
ユーザーは候補の中から選ぶことも、自分で入力することも可能です。
3. datalistのメリットと注意点
- フォームのユーザビリティを向上させられる
- JavaScript不要で簡単に導入できる
- 入力ミスの防止につながる
一方で注意点もあります。
- <候補リストのデザインはブラウザ任せでカスタマイズが難しい
- 候補が多すぎるとUXが悪化（20〜30個程度までが目安）
- 一部の古いブラウザではサポートが不十分
簡単で便利ですが、適材適所の設計が求められます。
4. autocompleteとの違い
autocompleteも入力補助に使える属性ですが、これとの違いは次の通りです。
- autocompleteは、ブラウザがユーザーの過去の入力履歴を表示する機能
- datalistは、開発者が指定した入力候補を提示する機能
たとえば「都道府県」「ジャンル」など、特定の選択肢があらかじめ決まっているケースではdatalistのほうが適しています。
5. スマホ対応はどう？
スマートフォンでも基本的には動作しますが、OSやブラウザによって候補の見え方が異なります。
iOS（Safari）：ポップアップ形式で候補が表示される
Android（Chrome）：インラインで候補が表示されるが、やや視認性に劣ることも
表示が崩れることはほとんどありませんが、見た目の印象が異なるため、主要なスマホ端末での検証をおすすめします。
6. よくある質問とトラブル
Q：候補を選んでも入力欄に反映されません。
→ optionタグにvalue属性がきちんと設定されているかを確認しましょう。
表示テキストだけでなく、value="〇〇"の形で値を指定する必要があります。
Q：CSSで候補の見た目を変えたいけどできない？
→ はい。ブラウザが生成する候補リストはCSSで直接スタイル指定できません。
代わりにselectタグやJavaScriptのカスタムUIを使うしかありません。
7. まとめ
input list="datalist"は、HTMLだけで実装できる軽量で便利な入力補助ツールです。フォームの使いやすさは、Webサイトのコンバージョン率にも影響します。
「ちょっとした便利機能」ですが、ユーザー目線の設計として非常に効果的です。
ぜひ、適切な場面で活用してみてください。
satokotadesignキャンペーン実施中！
