人気ブログランキング
人気ブログランキング
HTML&CSS PR

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

input タグとlabelタグの使い方
記事内に商品プロモーションを含む場合があります

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>

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

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

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

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

labelタグあり

labelタグなし

A B C

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

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

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

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

方法2:labelタグで囲むだけ

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

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

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

ABOUT ME
den
完全独学でWEBデザインを無謀にも挑戦している中年男。 工場勤務の会社員で3児の父。 チャレンジを忘れず、妻に怒られても心はおれず。 有益な情報を発信し、これを見ている人の為になればと思っています。
関連記事一覧