【HTML】labelタグにfor属性を付けるべき理由とは？使い方まで徹底解説！

input要素とセットで頻繁に用いられるのがlabelタグですね。label要素に使用できる属性はいくつかありますが、馴染みがないのがfor属性ではないでしょうか。今回の記事では、label要素におけるfor属性の意義をメインに解説をしていきます。

label要素とは？

まずはlabel要素についての説明をします。この要素は、input要素とセットで使用されることによって、いくつかのメリットが発生するものとなっています。そして、そのメリットと本記事で詳しく解説するfor属性には深い関係があるのです。そのメリットについては、後ほど詳しく説明するとして、こちらではlabel要素の具体的な使い方を以下に提示しましょう。

label要素とinput要素の組み合わせの例①

<div class="example">
　<label for="potepan">Example</label>
　<input type="checkbox" id="potepan">
</div>

label要素とinput要素を組み合わせるためには、input要素にidを設定し、label要素のfor属性で組み合わせたいinput要素のidを指定しなければなりません。また上記ではlabel要素内にfor属性を設定して組み合わせるinput要素を指定しましたが、以下のようにコードを書いても全く同じ意味合いになります。

label要素とinput要素の組み合わせの例②

<div class="example">
　<label>Example
    <input type="checkbox">
  </label>
</div>

ここまでをまとめると、label要素には以下の記述方法があるということになります。

短期集中でWebエンジニアになるならこちら

label要素とinput要素の組み合わせについて

さて、ここからはlabel要素におけるfor属性のメリットについて詳しくお話をしましょう。まずは以下のような2つのコードには、どのような違いが生まれるのか考えてみましょう。

label要素を用いた書き方

<div class="example">
  <label for="potepan">Example</label>
  <input type="checkbox" id="potepan">
</div> 

label要素を用いない書き方

<div class="example">
  Example
  <input type="checkbox">
</div> 

for属性を指定したlabel要素の有無はあれど、実際に表示した際、その見た目にはさほど変化がないはずです。では、2つ目の「label要素を用いない書き方」でもいいのでしょうか。

もちろんそんなことはありません。ではlabel要素にfor属性を指定することにはどのような意義があるのでしょうか。

ポテパンダの一言メモ

以下からは「label要素にfor属性を指定する方法」を例に説明していきますが、先ほど紹介したように「label要素のタグでinput要素を囲む方法」でも同じような効果があります。

label要素にfor属性を指定するメリット

label要素にfor属性を指定するメリットには、以下のようなものがあります。

上記3点のメリットについて、詳しく見ていきましょう。

input要素にlabel要素が視覚的に紐付く

1つ目のメリットはinput要素にlabel要素が視覚的に紐付くということです。コードを見たときに、1つ1つのinput要素がどのような意味なのか、何の項目なのかをlabel要素によって明示することができます。例として、以下の2通りのコードを見てみましょう。

label要素を用いた書き方

<div class="example">
  <label for="potepan1">Example1</label>
    <input type="checkbox" id="potepan1">
  <label for="potepan2">Example2</label>
    <input type="checkbox" id="potepan2">
  <label for="potepan3">Example3</label>
    <input type="checkbox" id="potepan3">
  <label for="potepan4">Example4</label>
    <input type="checkbox" id="potepan4">
</div>

label要素を用いない書き方

<div class="example">
  Example1
    <input type="checkbox">
  Example2
    <input type="checkbox">
  Example3
    <input type="checkbox">
  Example4
    <input type="checkbox">
</div>

このように2つの記述を見たときに、1つずつの項目が何を指しているのか分かりやすいのは、label要素を指定している用例の方です。

input要素にフォーカスが当たった際にlabel要素を読み上げできる

2つ目のメリットはinput要素にフォーカスが当たった際にlabel要素を読み上げできるということです。先ほどは、コードの見た目としてラベルとの関係性が分かりやすいというメリットを挙げましたが、for属性をinput要素のid属性で指定することによって、プログラム的にも紐付きをさせることができます。

たとえば読み上げソフト（スクリーンリーダー）がinput要素にフォーカスした際、for属性をinput要素のid属性で指定しておけば、label要素に書かれた文字を読み上げることができるのです。

上記の例で言えば、この機能はユーザーの視覚的なサポートを可能にしており、明らかにユーザビリティの向上をさせていることになります。Webサイトなどを制作する際、ユーザビリティに着目してコーディングをおこなうというのはとても大事な観点となります。

label要素をクリックしてもフォームがアクティブ化する

3つ目のメリットはinput要素にlabel要素が視覚的に紐付くということです。先ほどユーザビリティの面でお話をしましたが、こちらのメリットもユーザビリティ向上に役立ちます。

通常、チェックボックスやセレクトボックスはクリックする範囲が非常に小さく、押しにくいという特徴があります。しかし、for属性をinput要素のid属性で指定することによって、label要素をクリックするだけでチェックボックスやセレクトボックスの選択ができるようになるのです。

ためしに以下のコードをテキストエディターなどに入力して、label要素をクリックしてみてください。

<div class="example">
  <label for="potepan1">Example1</label>
    <input type="checkbox" id="potepan1">
  <label for="potepan2">Example2</label>
    <input type="checkbox" id="potepan2">
  <label for="potepan3">Example3</label>
    <input type="checkbox" id="potepan3">
  <label for="potepan4">Example4</label>
    <input type="checkbox" id="potepan4">
</div>

適切にfor属性をinput要素のid属性で指定していれば、チェックボックス自体をクリックしなくてもチェックボックスの選択ができるはずです。このようなコーディングは、ユーザビリティを向上させるためにとても効果的です。

一方で以下のようなコードでは、input要素の横に書かれた文言をクリックしても何も反応しません。

<div class="example">
  Example1
    <input type="checkbox">
  Example2
    <input type="checkbox">
  Example3
    <input type="checkbox">
  Example4
    <input type="checkbox">
</div>

2つのコードは結果としてユーザーにはほぼ同様のものとして表示されますが、ユーザビリティの面ではかなり大きな差があります。
短期集中でWebエンジニアになるならこちら

HTMLを学んでWebエンジニアを目指そう

Webエンジニアは、Webブラウザで利用できるサービスを作るエンジニアです。
Webブラウザとは、スマホやパソコンなどのwebブラウザから利用できるwebサービスやアプリなどのことをいいます。

HTMLとCSSを取得することで、Webエンジニアやフロントエンジニアへの就職や転職が可能です。

このブログを運営するプログラミングスクールのポテパンキャンプでは、実践的なカリキュラムと現役エンジニアからのレビュー、そしてポートフォリオ添削や模擬面談などの面談転職サポートにより、最短距離でWebエンジニアを目指すことができます。

Webエンジニアへの転職を考えている方は、是非一度無料カウンセリングへお申込みください。

短期集中でWebエンジニアになるならこちら

まとめ

今回の記事では、label要素におけるfor属性の意義をメインに解説をしていきました。最後にもう1度label要素におけるfor属性のメリットを確認しましょう。

上記3点のメリットを知ればfor属性を指定したlabelを使うしかありません。これからinput要素を用いる際には積極的にlabel要素を用いるようにしましょう！

短期集中でWebエンジニアになるならこちら

また当メディアを運営しているポテパンではHTMLにおける解説動画も公開しております。
わかりやすく解説しておりますので是非ご覧ください！