HTMLでラベルを活用するための基礎知識

HTMLで使うことのできる要素の中に「label」と呼ばれる要素があります。
これはそのまま「ラベル」と読み、「span」同様にインライン要素として存在する要素です。

spanとlabelの違い

spanは、汎用的に使えるインライン要素ですが、labelは主に項目名を明記する場合に利用します。
最も多い使い方は「input」要素とセットで利用することで、その「input」要素の「ラベル」として動作させることです。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

ラベルの便利な使い方

ラベルの活用方法を見るために、まずはラベルを使用しないでラジオボタンを表示するHTMLを作成してみましょう。

ラジオボタンを表示するコード

<form action="#">
  <input type="radio" name="multi" value="1"><span>選択肢1</span>
  <br>
  <input type="radio" name="multi" value="2"><span>選択肢2</span>
  <br>
  <input type="radio" name="multi" value="3"><span>選択肢3</span>
  <br>
  <input type="radio" name="multi" value="4"><span>選択肢4</span>
</form>

これを実行すると、以下の動画の通り、それぞれのラジオボタンを選択したい場合にはラジオボタンの円をクリックする必要があり、文字を選択してもうまく選択されません。

ラベルを使ったコードに変更

これを、ラベルを使ったHTMLコードに書き換えてみるとどうなるでしょうか。

<form action="#">
  <input type="radio" name="multi" value="1" id="radio1"><label for="radio1">選択肢1</label>
  <br>
  <input type="radio" name="multi" value="2" id="radio2"><label for="radio2">選択肢2</label>
  <br>
  <input type="radio" name="multi" value="3" id="radio3"><label for="radio3">選択肢3</label>
  <br>
  <input type="radio" name="multi" value="4" id="radio4"><label for="radio4">選択肢4</label>
</form>

文字を選択することで、選択肢が変更されていることがわかります。
このように、ラジオボタンに対する「ラベル」を設定することで、選択範囲を拡張することが可能になります。

ラベルの設定方法

ラベルは、主に「input」要素と組み合わせて使います。その時重要なのは「for」属性です。
「for」属性に「input」要素の「id」属性と同じ名前を設定することにより、ラベルと「input」要素を紐づけることができます。

逆に言うと、「for」属性と「id」属性の名前を間違えてしまうと、正しく動かなくなってしまいます。
間違えてしまった例を見てみましょう。

<form action="#">
  <input type="radio" name="multi" value="1" id="radio2"><label for="radio2">選択肢1</label>
  <br>
  <input type="radio" name="multi" value="2" id="radio1"><label for="radio1">選択肢2</label>
</form>

サンプルのように「選択肢1」を選ぶと「選択肢2」が、「選択肢2」を選ぶと「選択肢1」が選ばれてしまいます。
特にラベルを多く使う時、コードをコピーして直し忘れると間違えがちなので注意してください。

まとめ

HTMLでのラベルの使い方について紹介しました。

ラベルは、ちょっとしたコツを覚えれば簡単に活用することができるので、使いやすい画面を作成するために是非使ってみてください。