ラベルを使ってフォームのクリック範囲を大きくする

概要


ラベルを使うと、ラベルの中の文字をクリックすることで
ラジオボタンやチェックボックスなどをクリックしたのを同じになる。
ラジオボタンなどは小さくてクリックしづらいので
これを使うとクリックしやすくなる。

inputのidとlabelのforを同じにすることでラベルの関連付けがなされる
<input type="radio" name="example01" value="選択肢1" id="select01">
<label for="select01">選択肢1</label>

結果(コードは後述)

HTMLファイル


<form action="example.php" method="post" name="contact">
  <input type="radio" name="example01" value="選択肢1" id="select01">
  <label for="select01">選択肢1</label>
  
  <input type="radio" name="example01" value="選択肢2" id="select02">
  <label for="select02">選択肢2</label>
</form>

CSSファイル

説明

間違えやすい問題