labelタグってどういう時に使うの?そしてその使い方の解説

更新日:2016年12月24日

HTMLやCSSにかなり詳しい人でも意外と使い方を知らない、または使ったことがないのがlabelタグです。何も隠そう私も数年前まで存在は勉強した本で知っていても使ったことはありませんでした。そもそもどういう時に使うんだこれ状態でした。

でもある時を境に使う機会が格段に増えました。そのある時とはPHPを覚えたタイミングでした。
labelタグはformの中の部品であるラジオボタンやチェックボックスに対して補助的に使われるタグなので、HTMLやCSSにかなり詳しい人でも知らないんですよね。

それではどういう時に使うのかというと、例えばチェックボックスがあった時に本来チェックボックスの部分をピンポイントでクリックしないとチェックは付けられない仕様となっています。
下記のような感じです。文字の部分をクリックしてもチェックは付きませんね。

逃げるは恥だが役に立つ

しかしlabelタグを使うと文字の部分をクリックしてもチェックを付けることが出来るようになるんです。下記のような感じです。

labelタグの効力を分かって貰えた所で、今度は使い方を説明します。
使い方は簡単。labelタグで囲んであげるだけでOKです。


これで文字の部分をクリックしても反応するようになりました。