このページについて
このページではHTMLで使う事ができるlabelタグの機能と使い方の解説をしています。
labelタグ
labelはその名の通りラベルを定義するタグなんですが、これは結構重要な役割を持っています。
まずこのタグをどこで使うのかというと、ユーザーに何かを入力してもらう時のテキストエリアなどですね。「何を入力するか」を明示しておけばユーザーは何も困ることはないと思います。逆に何も書かれていなくて入力エリアが3つ置かれているだけだと、どこに名前を入れてどこにメールアドレスを入れるのかサッパリわかりません。
もう1つ重要な役割はスクリーンリーダーでの読み上げです。スクリーンリーダーを使用してウェブサイトを見ている方にとってはlabelタグというのは非常に重要で、これがあるおかげでその入力エリアに何を入力すれば良いのか聞く事ができます。そもそも入力エリアで使うinputタグやtextareaタグにはそのような説明用の機能はありませんしね。
そして最後に重要な点は「クリック可能な領域を設定できる」事です。buttonタグとかめっちゃ小さいこともあるんですが、しっかりとlabelタグで関連付けをしておけばそのラベル文字もクリック領域として設定する事ができます。
labelタグの書き方
いくつか重要な役割を紹介しましたが、そのlabelタグの書き方を解説します。
基本的には書き方は2つあります。1つは「要素の中に直接入れる」ケースと、もう1つが「for属性を使って離れた場所に設置して関連付けする」方法です。
1つ目の要素を直接入れるパターンは簡単です。
<label>ラベル名<input type="text" name="input1></label>この場合は、ラベルタグの中にinputタグを入れているので関連付けが不要です。
2つ目のfor属性を使うパターンは少し設定する必要があります。
<input type="checkbox" id="input1" name="in1">
<label for="input1">ラベル</label>inputタグにid属性を付与し、そのid名と全く同じ値を持つfor属性をlabelに付与します。これで関連付けが完了したので、ラベル文字をクリックしてもチェックが可能になります。実際に確認してみましょう。
ラベルをクリックしてもチェックが有効になる事がわかります。for属性を適切に設定していないと、これが機能しません。
こちらはfor属性を外してあるのでラベルはただの文字列でしかありません。
labelタグの注意点
labelタグはinputタグなどの要素を含むことはできますが、aタグなどの要素は入れないのが定石となっています。これはスクリーンリーダーを使用している方が困惑するのと、ボタンなどの操作が行いにくくなるとうデメリットしかありません。
他にもbuttonタグやhタグなども同様に、ユーザーを混乱させるだけなのと適切な使い方ではないので含めないようにしましょう。
labelタグは通常は何も装飾の無いインライン要素として扱われます。装飾する場合はCSSを使って装飾しましょう。
placeholder属性との違い
textareaタグなどには入力のヒントを示すplaceholder属性というのがあります。ただしあくまでも「どういう書き方をしてほしいか」を示すだけのヒントとして使うだけなので、labelタグの代わりとして使う事は推奨されていません。
ラベルはその入力欄に何を入れるかを説明し、placeholderはその書き方の例を示すという使い分けを覚えておきましょう。
まとめ
labelタグはinputタグやtextareaタグなど、何を入力してほしいかをユーザーに対して説明する時に使います。for属性を適切に使えばどれだけ離れていてもボタンを操作することもできます。
aタグやbuttonタグなど、labelタグに含めてはいけないものもありますし、paleceholder属性との使い分けもしっかりと覚えておきましょう。