labelタグ

labelは、フォーム部品と項目名を関連付けるタグです。

コンテンツ・モデル

属性

labelタグには以下の属性が指定できます。

サンプル

テキストボックスとラベルを関連付ける

<p>
  <label for="txt1">メモ</label>
  <input type="text" id="txt1">
</p>

ラジオボタンとラベルを関連付ける

<p>
  <label for="rdoMeiji">明治</label><input type="radio" name="gengo" id="rdoMeiji">　
  <label for="rdoTaisho">大正</label><input type="radio" name="gengo" id="rdoTaisho">　
  <label for="rdoShowa">昭和</label><input type="radio" name="gengo" id="rdoShowa">　
  <label for="rdoHeisei">平成</label><input type="radio" name="gengo" id="rdoHeisei">　
  <label for="rdoReiwa">令和</label><input type="radio" name="gengo" id="rdoReiwa">
</p>

（参考）ラジオボタンとラベルを関連付けない場合

関連付けないとラベル部分をクリックしても選択できません。

備考

• フォーム部品とラベルを関連付けると、ラベル部分のクリックでフォームを選択することができます。
  （ラジオボタンやチェックボックスはとても使いやすくなります。）

Tweet