HTML inputとセットで活用するlabelタグについて解説（forやidの役割は？）

WEBアプリなどでHTML上で入力値を取得するinputとともに使用するlabel要素についてあまり詳しく知らなかったので調べてみました。

まず前提としてinputを使用する際のルールについて押さえておきます。

inputタグの概要

WEB上でユーザーから何かしらの入力をしてもらうためにはこの<input>タグを使用することになります。

基本的な使い方は

<input type=” ここに決まった文字列を入れいる ” name = “名前” value =”値” id=”labelタグと紐付けつるID”>

のようになっています。type＝の部分で好きな入力方法を決められるのだと覚えておけばよいです。

具体例：ボタン入力

<input type="button" value="ボタンの名前">

具体例：チェックボックス（複数指定）

<form>
  <label><input type="checkbox" name="groupB" value="A">A</label>
  <label><input type="checkbox" name="groupB" value="B">B</label>
  <label><input type="checkbox" name="groupB" value="C">C</label>
</form>

A B C

inputタグをlabelタグと紐付けるメリットは？

inputタグとlabelタグを紐付けるメリットは

inputタグで表示する文字列やオブジェクトはすべてinputの要素にすることができます。

例えば、チェックボックスの選択する□を選択せずに、その横の「A」を選択してもチェックが入るようになるのです。

labelタグあり

A B C

labelタグなし

A B C

labelタグとinputタグを紐付けるには？

labelタグとinputタグを紐付ける方法は以下の2つのやり方があります。

方法１：labelのforで指定したIDとinputのidを同じにする。

<label for="好きなID">サンプル</label>
<input type="checkbox" id="好きなID">

方法２：labelタグで囲むだけ

<label>サンプル
　　<input type="checkbox">
</label>

この2つのやり方ですが、方法２の方が簡単に思えるかもしれません。しかし、コードが煩雑になると分かりづらくなるため、極力方法１の方を推奨しておきます。

webアプリを作成する場合もこのlabelとinputは理解しておく必要があります。

Django テンプレートでform.as_pを使わずにフォーム入力をする方法（エラーの原因も分かる） フォームで設定した入力を一括でテンプレートで入力する場合、form.as_pを使用すると簡単に入力フォームが作成されます。しかし、テン...