VIDEO LESSON

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

再生時間 7:14動画を別のタブで開く ↗

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

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

0:00こんにちは。
0:00エイチティーエムエル、リファレンス解説です。
0:04エイチティーエムエルタグ編の五十八本目は、ラベルタグです。
0:08ラベルは、フォームの入力欄に説明を結び付けるタグです。
0:13たとえばメールアドレスやお名前といった文字は、ただ画面に書いただけでは、
0:17どの入力欄の説明かは見た目でしか伝わりません。
0:22ラベルで結び付けると、説明をクリックしただけで対応する入力欄に移動したり、
0:27チェックを付けたりできるようになります。
0:31さらに画面読み上げソフトでも、入力欄と説明がセットで伝わります。
0:36今回は結び付けの二つの書き方、クリックできる仕組み、間違えやすいポイントまで順に学びましょう。
0:43どんな場面で使うか、身近なフォームで考えてみましょう。
0:47お問い合わせフォームのお名前、メールアドレス、本文。
0:51会員登録のパスワード。
0:53アンケートのチェックボックスやラジオボタン。
0:56商品を選ぶプルダウン。
0:58これらすべての入力部品には、何を入れるのか、何を選ぶのかを示す説明が必要です。
1:03その説明を担当するのがラベルです。
1:06入力欄が増えるほど、説明との対応が分かりにくくなりますが、ラベルで正しく結び付けておけば、
1:11利用者は迷わず、支援技術を使う人も内容を理解できます。
1:17フォームを作るときは、入力欄とラベルを常にセットで考える習慣を付けましょう。
1:22基本の書き方を確認します。
1:24画面の例では、ラベルにフォー属性でイーメールと書き、入力欄のアイディーにもイーメールと書いて、
1:28ふたつを結び付けています。
1:33ここで最も間違えやすいのが、フォーはネームではなくアイディーに対応するという点です。
1:39ネームは送信時の項目名、アイディーは文書の中で要素を区別する目印で、役割が違います。
1:45アイディーは同じ文書の中で重複させてはいけません。
1:49値が一文字でもずれると結び付きは切れてしまうので、コピーしてそろえるなど、
1:53正確に一致させることが大切です。
1:57開始タグと終了タグの間に、説明の文字を書きます。
2:00もうひとつの書き方として、入力欄をラベルの中に入れる方法があります。
2:05画面の例のように、説明の文字と入力欄をまとめてラベルで囲むと、それだけで結び付きが成立します。
2:12この場合はフォーとアイディーを書く必要がありません。
2:16チェックボックスやラジオボタンでは、この包む書き方がよく使われ、文字と部品が近くに置けるので読みやすいのが利点です。
2:25ただし、ひとつのラベルの中に複数の入力部品を入れる書き方は避けてください。
2:30対応が曖昧になり、クリックや読み上げの動作も分かりにくくなります。
2:35どちらの書き方でも、結び付ける相手はひとつが原則です。
2:39ラベルを正しく結び付けると、操作がぐっと楽になります。
2:43代表例がチェックボックスです。
2:45チェック欄そのものは小さく、マウスでもスマートフォンのタップでも押しにくい部品です。
2:52ところがラベルと結び付けておくと、横の説明文字を押しただけでもチェックのオンとオフが切り替わります。
2:59ラジオボタンでも同じで、選択肢の文字全体がクリックできる範囲になります。
3:04テキスト入力欄では、ラベルを押すとその欄にカーソルが移動します。
3:09見た目の説明であるだけでなく、操作できる範囲を広げる実用的な役割がある点が、
3:13ラベルの大きな魅力です。
3:17活用例として、申込みフォームの形を見てみましょう。
3:20画面の例では、お名前と電話番号、それぞれの入力欄の直前にラベルを置いています。
3:26こうして目的を常に表示しておくと、入力の途中で、この欄には何を書くのでしたか、
3:30と迷うことがありません。
3:34記事でも、入力欄の目的を常に表示する場面がラベルの代表例として挙げられています。
3:40メールアドレスの例のように、オートコンプリート属性を入力欄に添えると、ブラウザーが過去の入力を候補として出してくれて、
3:45さらに使いやすくなります。
3:50ラベルは見出しのように装飾するためではなく、目的を伝えるために書くものです。
3:56よく混同されるプレースホルダーとの違いを整理します。
4:00プレースホルダーは、入力欄の中に薄く表示される入力例で、文字を打ち始めると消えてしまいます。
4:07つまり入力後には、何の欄だったのかが分からなくなります。
4:12一方ラベルは入力欄の外に常に表示され続ける説明です。
4:16そのため、説明をプレースホルダーだけで済ませるのは避けてください。
4:21おすすめは役割分担です。
4:23ラベルで欄の目的をはっきり示し、プレースホルダーは、たとえばアットマークを含むアドレスの形のような、
4:28書き方のヒントだけに使います。
4:33この区別を知っておくと、使いやすいフォームに一歩近づきます。
4:38ラベルの属性を確認します。
4:40ラベル専用で中心になるのはフォー属性で、結び付ける入力部品のアイディーを指定します。
4:46包む書き方ではフォーは不要です。
4:49そのほかは共通属性が使えます。
4:51アイディーは文書の中でひとつだけの目印、クラスはシーエスエスやジャバスクリプトでまとめて選ぶための名前、
4:57ラングは内容の言語を示します。
5:02画面の例では、複数行の入力欄であるテキストエリアにも、同じ考え方でラベルを結び付けています。
5:09データ属性に個人情報などの秘密を置かない点も、ほかの要素と共通の注意です。
5:15属性でラベルの意味自体は変わりません。
5:18よくある間違いを三つ挙げます。
5:20一つ目は、フォーの値にネームを書いてしまう間違いです。
5:23対応するのはアイディーだけなので、クリックしても反応しなくなります。
5:28二つ目は、アイディーの重複や、値の打ち間違いです。
5:31大文字と小文字の違いでも一致しなくなるため、開発者ツールで実際の構造を確認しましょう。
5:37三つ目は、ラベル自体を付け忘れたり、プレースホルダーだけで済ませたりする間違いです。
5:42読み上げでは説明のない入力欄になってしまいます。
5:46また、ボタンなどラベルを付けられない部品もあるため、対応できる部品かどうかも意識してください。
5:52ブラウザー互換性を確認します。
5:54記事が参照するエムディーエヌの記録では、ラベル要素はクロームが一以降、エッジが十二以降、
6:00ファイアフォックスが一以降、サファリが四以前から対応しており、フォー属性も同じ顔ぶれです。
6:06歴史の長い基本要素なので、現在の主要ブラウザーでは安心して使えます。
6:11実装後の確認では、まずラベルの文字をクリックして、目的の入力欄に移動するか、
6:15チェックが切り替わるかを試してください。
6:19次にキーボードのタブキーで順に移動できるか、三百二十ピクセル程度の細い画面でも説明と入力欄が欠けないかを見ます。
6:27クリックで反応しない場合は、フォーとアイディーの不一致を疑いましょう。
6:32最後にまとめです。
6:33ラベルタグは、フォームの入力欄に説明を結び付ける要素でした。
6:38ポイントは三つです。
6:40一つ目、結び付けはフォーとアイディーを一致させる方法と、入力欄をラベルで包む方法の二通りがあること。
6:48二つ目、ラベルを押すと入力欄を選べるようになり、小さなチェック欄でも操作しやすくなること。
6:55三つ目、説明は常に残るラベルで示し、プレースホルダーはヒントに留めることです。
7:01練習として、メールアドレスの欄にフォーとアイディーをそろえたラベルを付けて、
7:07文字のクリックでカーソルが移るか試してみてください。
7:12お疲れさまでした。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

labelタグの役割と属性を、コード例・活用事例・注意点とともに解説。Chrome・Edge・Firefox・Safariの互換性も確認できます。入力欄の説明。for と入力要素の id を一致させるとクリックでも選択できます。

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