HTMLの基本「labelタグ」について

Djangoでアプリ開発するときに多用するであろうlabelタグについて学んでおきます。

そもそも<label>ってなに？と思う人は、

よくホームページで見るテキスト入力の枠やボタンを、設置する際に使うタグであると考えてもらえれば分かると思います。

labelタグを使う目的

<input>や<textarea>のタグを使ってユーザからの入力を行うタグに説明を加えるためのタグです。その他に、入力しやすさが向上する等のメリットがあります。

その為、labelの使う際は、<input>や<textarea>のユーザー入力タグとどのように紐付けるかを考えてコーディングする必要があります。

<input>や<textarea>を使う時は、極力labelタグを使う様にした方が良さそうです。

labelタグの使い方

2通りの使い方があります。

<label>と</label>の間に<input>や<textarea>を入れる方法

【使用例】

<label>

　<input
　　type="text"
　　id="name"
　　name="name"
　　value="記入欄"(記載している文字列)
　　required(入力項目が入力必須)
　　minlength="4"(最小文字数)
　　maxlength="8"(最大文字数)
　　size="10">
</label>

【実際の表示】

　ここに表示 　

<label>と</label>の間に<input>が入っている場合は、<label>がこのinputタグに紐付いている事になりますので、これは理解しやすいと思います。

【補足】

inputタグのtype=“#”の#の部分を変更すれば、その他機能が得られるので補足しておきます。

【リセットボタンの作成】

type="reset"

【送信ボタンの作成】

type="submit"

<label>と</label>の間ではなく、その外に<input>や<textarea>を配置する方法

labelの後にfor=“#”を追加し、label for=“#”とinput id=“#”の#を同じ文字列にする事で紐付けができます。

【使用例】

<label for="ここを同じにする">
  ここをクリック！
</label>
<div>
  <input type="checkbox"   
　　　　　 id="ここを同じにする">
</div>

【実際の表示】

ここをクリック！

【使用例２】

質問：どちらに行きたい？
<div>
  <label for="ここを同じにする1">
   【山に行く？】
  </label>
  <label for="ここを同じにする2">
   【海に行く？】
  </label>
</div>

<div>※「山に行く？」や「海に行く？」押しても反応するのを確認してください。</div>
<div>
  <input type="checkbox"   
　　　　　 id="ここを同じにする1">山
</div>
<div>
  <input type="checkbox"   
　　　　　 id="ここを同じにする2">海
</div>

【実際の表示】

質問：どちらに行きたい？

「ここを同じにする」の箇所を同じ文字列にすると、そのlabelと inputが紐付けされます。

以下の「ここをクリック」を押してチェックボックスにチェックが入るか確認してみてください。

この使い方のメリットは、２つを離してコーディング出来る為、例えば説明文と入力欄が離れている場合に、その説明文をタッチしたら入力欄にフォーカスする事ができます。