バナー画像

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

本記事の要点
  • label要素の概要とメリット
  • 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要素の組み合わせの例2

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

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

label要素の書き方
  • inpu要素tにid属性を設定し、label要素のfor属性でinput要素のidを指定する
  • 組み合わせたいinput要素をlabel要素のタグで囲む

label要素におけるfor属性のメリットとは?

さて、ここからは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属性を指定するメリットには、以下のようなものがあります。

label要素にfor属性を指定するメリット
  • input要素にlabel要素が視覚的に紐付く
  • input要素にフォーカスが当たった際にlabel要素を読み上げできる
  • label要素をクリックしてもフォームがアクティブ化する

上記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つのコードは結果としてユーザーにはほぼ同様のものとして表示されますが、ユーザビリティの面ではかなり大きな差があります。

まとめ

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

label要素にfor属性を指定するメリット
  • input要素にlabel要素が視覚的に紐付く
  • input要素にフォーカスが当たった際にlabel要素を読み上げできる
  • label要素をクリックしてもフォームがアクティブ化する

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

【関連記事】
▶︎【HTML】align属性の使い方まとめ(center/right/left)
▶︎HTMLで「nbsp」やCSSでスペースを入れる3つの方法!
▶︎【HTML入門】改行を有効に使って読みやすいWebページを作ろう!

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。