(HTML) labelタグの使い方【input要素を使い易くする】

本記事では、htmlで使用するタグの一種である
labelタグの使い方と、そのメリットについて記事を書いていく。

labelタグとは

HTMLの<label>ラベルタグとは、
<input>や<textarea>などのformでのリクエスト値入力欄に対して、
キャプション※をつけるために使うタグのことだ。

HTML の <label> 要素は、ユーザーインターフェイスの項目のキャプションを表します。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/label

※キャプションとは簡単に言うと「何を入力する欄なのか」が分かるように、テキストや画像を入れたもののことだ。

<label>
タイトル
<input type="text" name="title">
</label>

上記では「入力欄にはタイトルを書けばいいんだな」と分かるだろう。
このように<label>には、入力欄の意味や説明を記載する。

ラベルを使うことのメリット

では次に、
ラベルタグを使うことのメリットを説明していく。

ラベル範囲のクリックをinput要素に紐付けてくれる

ラベルタグを使うことで、
ラベルタグが指定されている範囲のクリックを、input要素にひも付けてくれる。

labelタグで紐づけることのメリットが何かと言うと、
通常<label>を使わない場合、input要素をクリックしないと入力欄とクリックは紐づかない。
しかし、<label>タグを使うと、紐づいたinput要素にクリックを紐付けてくれる。

サンプルを見てもらった方が理解が早いと思うので、サンプルで簡単に説明していく。

以下は<label>を使わないでラジオボタンを作成した場合の例。

//文字列をクリックしても無反応
<input type="checkbox" name="attend" value="true">出席する

<label>を使わないでラジオボタンを作成した場合、input要素と「出席する」という文字は紐づいていないので、文字の部分をクリックしてもラジオボタンにチェックがつかない。

対して、以下は<label>を使ってラジオボタンを作成した場合の例。

//文字列をクリックするとチェックが入る 
<label>
<input type="checkbox" name="attend" value="true">出席する 
</label>

<label>タグを使用した場合、タグ内のテキストをクリックすると、紐づくinput要素にフォーカスがあたる。

<label>タグを使用した場合、入力欄自体をクリックしなくても、<label>をクリックすれば、入力欄がアクティブになる。

チェック部分（□）は小さく、クリックやタップをしづらいため、<label>の使用は、ユーザーの使いやすさを向上させる上で特に重要な要素なので忘れずに使用するようにしよう。

また今回はチェックボックスでの例を紹介したが、ラジオボタンでも同様の実装が可能だ。

アクセシビリティの向上

読み上げソフトを使っているユーザーは「何を入力する欄なのか」を<label>のテキストを頼りに把握することがある。アクセシビリティ向上のためにも、積極的に<label>を使うと良いだろう。

labelタグの基本的な使い方

ここまで簡単にlabalタグの使い方を紹介してきたが、
次に、より詳細なlabelタグの使い方を紹介していく。

先に結論から言うと、labelタグの使い方は大まかに以下の2パターンがある。

labelタグの使い方2パターン

labelの中にinputを入れてひも付ける方法
「label for」と「input id」で紐付ける方法

順番に使い方を紹介していく。

①　labelの中にinputを入れてひも付ける方法

1つめは、<input>を<label>タグで囲む方法だ。

入力欄も、説明文や項目名などのテキストも、合わせて<label>の中に入れて使用する。

//文字列をクリックするとチェックが入る
<label>
<input type="checkbox" name="attend" value="true">出席する
</label>

冒頭のサンプルでも紹介した通りなので、特に詳しい説明は割愛する。

ラベルに画像を使用する

<label>内には、<div>、<span>、<img>など、さまざまな要素を入れることが可能だ。

それを利用すれば、ラベル内に画像などもクリック可能領域として紐づけることが可能となる。


<label>
<div><img src="./sample.png"></div>
<input type="checkbox" name="test">
</label>

画像のクリックでチェックが入れることが可能だ。

② 「label for」と「input id」で紐付ける方法

2つめは<label>のfor属性を使ってinput要素を紐付ける方法だ。

<label for=”〇〇”>と<input id=”〇〇”>のようにペアで〇〇の部分しておくことで、、
お互いが別の場所にあっても、ひも付くようになる。


<label for="test-id">離れてるけどチェックできる</label>
<div>
<input type="checkbox" id="test-id">
</div>

<label>と<input>が離れているが、ラベルテキストのクリックでチェックが入る。

1つの入力欄に複数のlabelをひも付けることもできる

1つの入力欄に対して、複数回<label for=”◯◯”>を使うことも可能だ。


<label for="test-id">どれを押してもチェックできる</label><br>
<label for="test-id">どれを押してもチェックできる</label><br>
<label for="test-id">どれを押してもチェックできる</label>
<div>
<input type="checkbox" id="test-id">
</div>