VIDEO LESSON

HTMLのdatalistタグとは？属性・使い方・ブラウザー互換性と活用例の解説動画

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00エイチティーエムエルリファレンス解説です。
0:03エイチティーエムエルタグ編の九十一本目は、データリストタグです。
0:08データリストは、文字入力欄に対して、あらかじめ用意した入力候補のリストを示す要素です。
0:13検索窓で文字を打ち始めると候補が下に並ぶ、あの仕組みを、エイチティーエムエルだけで作るための部品だと考えてください。
0:21ただし大切なのは、データリスト単独では画面に何も表示されないことです。
0:26入力欄であるインプットと結び付けて初めて候補が現れます。
0:30今回は、その連携の仕組み、オプションの書き方、セレクトとの違い、コード例、
0:34互換性、よくある間違いまで順番に確認します。
0:38まず連携の仕組みです。
0:40つなぎ役は二つの属性です。
0:42インプット側では、リスト属性に候補リストの名前を書きます。
0:46データリスト側では、アイディー属性に、まったく同じ名前を書きます。
0:51この二つが一致したとき、ブラウザーは入力欄と候補リストを一組だと理解し、
0:55入力中に候補を表示します。
0:59逆に言えば、スペルが一文字でも違う、あるいは片方を書き忘れると、候補は一切出ません。
1:05エラー表示も出ないので、動かないときはまずこの対応関係を疑ってください。
1:10名前は文書の中で重複しないものを選び、役割が分かる名前を付けるのがおすすめです。
1:17基本の書き方を確認します。
1:19この教材では、開始タグと終了タグを明示し、その間に候補となるオプションを並べます。
1:25画面の例では、まずラベルで学びたい言語という説明を付け、インプットのアイディーと対応させています。
1:33次にインプットのリスト属性が、データリストのアイディーを指しています。
1:39試すときは、練習用ファイルのボディの適切な位置に、ラベル、インプット、データリストをセットで写してください。
1:47保存して再読み込みし、入力欄に文字を入れたり、欄をクリックしたりしたときに候補が現れるか、
1:53開発者ツールでも入れ子を確認しましょう。
1:58記事の活用事例を読み解きます。
2:00目的は、自由入力に候補を補うことです。
2:03利用者がエイチ、と打ち始めれば、エイチティーエムエルが候補として絞り込まれて表示され、
2:08クリックやキー操作で選ぶだけで入力が完了します。
2:13長い駅名、都道府県名、商品名など、打ち間違いが起きやすく、よく使う値が決まっている場面で特に役立ちます。
2:20そして重要なのは、候補はあくまで手助けだという点です。
2:24候補にない言葉、たとえばジャバスクリプトを学びたい人が、そのまま自由に打ち込んで送信することもできます。
2:32この自由さが、データリストの最大の特徴です。
2:35候補の中身であるオプションの書き方です。
2:38候補一つにつき、オプションを一つ書きます。
2:42バリュー属性に書いた値が、候補として表示され、選ばれたときに入力欄へ入る値になります。
2:49画面の例では、東京、大阪、福岡という都市名が候補になります。
2:54ブラウザーによっては、バリューの横に補足の文字を添えて表示できる場合もありますが、
2:59見え方はブラウザーごとにかなり違います。
3:04そのため、候補として伝えたい一番大切な言葉は、バリュー自体に含めておくのが安全です。
3:11候補の数が多すぎると選びにくくなるので、よく使うものに絞る配慮も忘れないでください。
3:18よく混同されるセレクトとの違いを整理します。
3:21セレクトはドロップダウンから、用意された候補の中からだけ選ばせる仕組みです。
3:28都道府県や支払い方法のように、答えが決まっていて、それ以外を受け付けたくない場合はセレクトが向いています。
3:36一方データリストは、候補を示しつつ、候補以外の入力も許します。
3:41駅名の検索窓のように、候補で助けたいけれど、候補にない目的地もあり得る場面ではデータリストが向いています。
3:50記事も、候補だけから選ばせるならセレクト、と明言しています。
3:55禁止したいのか、助けたいのか、その目的で選んでください。
3:59属性についてです。
4:01データリストには、この記事で必須となる専用の属性はありません。
4:05ただし、連携のためにアイディーは実質的に欠かせません。
4:09インプットのリスト属性と一致するアイディーがなければ、候補リストとして働かないからです。
4:16そのほか、クラスやラングなど、多くの要素で使えるグローバル属性は必要に応じて利用できます。
4:22注意したいのは、候補側のオプションに付けるバリューなど、子要素の属性と混同しないことです。
4:29また、データリスト自体はふだん画面に見えない要素なので、クラスを付けたからといって候補の見た目が自由に変えられるわけではない点も覚えておきましょう。
4:40どんな入力欄と組めるかを確認します。
4:43中心になるのは、テキストやサーチといった文字を入力するタイプです。
4:48検索キーワード、都市名、言語名など、文字の候補と相性がよいからです。
4:54ブラウザーによっては、数値、日付、色などのタイプでも候補が働く場合がありますが、
4:59表示のされ方や対応状況はタイプごとに異なります。
5:05一方、チェックボックスやラジオボタンのように、文字を打たない入力にはデータリストは結び付けられません。
5:13使いたいタイプで本当に候補が出るかは、対象ブラウザーで実際に試してから採用を決めてください。
5:21ブラウザー互換性を確認します。
5:23記事が紹介するエムディーエヌのデータでは、データリスト要素本体は、クロームが二十以降、
5:30エッジが十二以降、ファイアフォックスが四以降、サファリが十二・一以降に対応しています。
5:37長く使われている要素ですが、サファリだけは比較的新しい版からである点に注意してください。
5:45また、この表は要素本体の対応開始版を示すもので、候補の表示方法や絞り込みの挙動まで同じことを保証するものではありません。
5:54特にスマートフォンでは、候補の出方がパソコンと大きく違う場合があります。
6:00実機で入力しやすさを確認する習慣を付けましょう。
6:04よくある間違いを三つ挙げます。
6:07一つ目は、インプットのリスト属性とデータリストのアイディーの名前が一致していないことです。
6:14候補が出ない原因の筆頭で、スペルの違いを見直してください。
6:19二つ目は、データリストが候補以外の値を禁止してくれると思うことです。
6:25禁止機能はありません。
6:27送信された値が想定内かどうかは、受け取り側でも必ず確認する必要があります。
6:33三つ目は、データリストを置くだけで候補一覧が常時表示されると思うことです。
6:40通常は入力操作のときにだけ現れます。
6:43あわせて、三百二十ピクセル程度の小さい画面幅や文字拡大でも、入力欄が欠けずに操作できるかを確認してください。
6:52まとめです。
6:53データリストは、入力欄に候補リストを補いながら、候補以外の自由な入力も受け付けるための要素です。
7:02最後にチェックリストで確認しましょう。
7:05まず、インプットのリスト属性とデータリストのアイディーが一致しているか。
7:11次に、候補はオプションのバリューで書かれ、よく使うものに絞られているか。
7:17そして、候補だけに限定したい場面ではないか、限定したいならセレクトを選ぶ判断ができているか。
7:25この三点がそろえば、入力しやすいフォームになります。
7:30これでデータリストタグの解説を終わります。
7:33ぜひ、検索窓や言語の入力欄で実際に試してみてください。

この動画で学べること

datalistタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。input の list と id を対応させ、入力候補を出します。候補以外の値を禁止する機能ではありません。

解説記事・サンプルコードを読む：HTMLのdatalistタグとは？属性・使い方・ブラウザー互換性と活用例 →