【HTML】lavelタグにfor属性を付けるべき理由とは?使い方まで徹底解説!
  • facebookページ
  • twitterページ
  • 2020.02.25

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

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

    本記事の要点
    • label要素の概要とメリット
    • label要素におけるfor属性の意義

    label要素とは?

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

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

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

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

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

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

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

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

    label要素を用いた書き方

    label要素を用いない書き方

    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要素を用いた書き方

    label要素を用いない書き方

    このように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要素をクリックしてみてください。

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

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

    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ページを作ろう!



    優良フリーランス案件多数掲載中!
    フリーランスエンジニアの案件をお探しなら
    ポテパンフリーランス

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE