2022.09.16

【HTML】datalistの使い方とメリット、デメリット

HTML

この記事は、最初の投稿から2年以上が経過しています。

最終更新から797日が経過しています。

「datalistってどんなタグ？」

「datalistのメリット､デメリットを知りたい」

こんな悩みにお答えします｡

datalistタグはinputタグの入力候補リストを表示するために使うHTMLタグです｡

自由入力(input)と選択入力(select)の機能をあわせ持つことができ､さらにJavaScriptなどプログラムを使うことなく入力候補リストから絞り込み検索できるというメリットがあります｡

デメリットはdatalistがinputの補助的な機能のため､入力候補リスト以外も自由に入力できてしまうことです｡

リスト以外を入力されたくない場合はselectを使ったほうがいいです｡

入力デモ

<input type="text" list="keywords">
<datalist id="keywords">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="PHP">
  <option value="WordPress">
</datalist>

この記事では､datalistタグの使い方､メリット､デメリットなどを解説します｡

記事を読み終えると､datalistタグについて理解でき､ユーザーが使いやすい複数選択のフォームをつくることができます｡

私は､2015年からWeb制作の仕事をはじめて､170件ほどのWebサイトを制作してきました｡
その間､いろいろな失敗を繰り返し､クライアントからのフィードバックや本などで勉強することにより､多くのノウハウを得ることができました｡

目次

datalistタグの使い方
datalistタグのメリット､デメリット
1. メリット
2. デメリット
datalistタグを使えるinputタグのtype属性
1. text
2. search
3. tel
4. email
5. date
まとめ

datalistタグの使い方

datalistタグはinputタグの入力候補リストを表示するために使います｡

datalistタグを設定することによってブラウザのサジェストのように表示されます｡

<input type="text" list="keywords">
<datalist id="keywords">

</datalist>

inputタグのlist属性の値と､datalistタグのid属性の値を一致させることで連携させることができます｡

<datalist id="keywords">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="PHP">
  <option value="WordPress">
</datalist>

datalistタグの子要素にはselectタグと同じようにoptionタグを指定します｡

基本はこれだけです｡

datalistタグのメリット､デメリット

メリット

datalistタグを使うことのメリットは自由入力欄に入力候補リストを表示することによってユーザビリティがよくなります｡

あらかじめ想定されるワードが表示されるので､キーボードで直接入力しなくてよくなります｡

また1文字入力するごとにリアルタイムで絞り込み検索ができるので､入力候補が多い場合にselectよりも便利です

なので､4,5個程度の入力候補リストよりも､何10､何100のリストの場合によりメリットを感じられます｡

入力候補リスト(datalist)が表示されることにより自由入力欄(input)のユーザビリティがよくなる
プログラム無しで入力候補リストの絞り込み(部分一致･あいまい検索)ができる

デメリット

ブラウザによって見え方が違うので､少し慣れている人のほうが迷うことがあるかもしれません｡

比較的新しい機能のためユーザーが操作方法に迷う可能性がある

datalistタグを使えるinputタグのtype属性

datalistタグが使えるinputタグのtype属性を確かめてみました｡

text

基本はtype="text"で自由入力ができます｡

<input type="text" list="list1">
<datalist id="list1">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="PHP">
  <option value="WordPress">
</datalist>

search

type="text"と同じですが､検索フォームで使います｡

<input type="search" list="list2">
<datalist id="list2">
  <option value="HTML">
  <option value="CSS">
  <option value="JavaScript">
  <option value="PHP">
  <option value="WordPress">
</datalist>

tel

電話番号入力に使いますが､自由入力できtype="text"と変わりありません｡

ただ､電話番号を入力候補リストから選択するという使用例は思い浮かびません｡

<input type="tel" list="list3">
<datalist id="list3">
  <option value="090-111-1111">
  <option value="080-111-1111">
  <option value="070-111-1111">
  <option value="060-111-1111">
  <option value="050-111-1111">
</datalist>

email

メールアドレス入力に使います｡

<input type="email" list="list4">
<datalist id="list4">
  <option value="abc@example.com">
  <option value="info@example.jp">
  <option value="abc@example.co.jp">
  <option value="info@example.net">
  <option value="abc@example.info">
</datalist>

date

意外にもdatalistタグが使えました｡

未入力の場合は入力候補が表示され､その他を選択するとカレンダーが表示されます｡

<input type="date" list="list5">
<datalist id="list5">
  <option value="2022-01-01">
  <option value="2022-02-02">
  <option value="2022-03-03">
  <option value="2022-04-04">
  <option value="2022-05-05">
</datalist>