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

(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要素にひも付けてくれる。

htmlのlabelタグを使うことのメリット

 

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

 

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

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

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

 

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

htmlのlabelタグを使わない画像

 

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

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

 

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

htmlのlabelタグを使う画像

 

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

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

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

 

 

アクセシビリティの向上

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

 




 

labelタグの基本的な使い方

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

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

 

labelタグの使い方2パターン
  1. labelの中にinputを入れてひも付ける方法
  2. 「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>が離れているが、ラベルテキストのクリックでチェックが入る。

htmlのlabelタグを使う画像2

 

 

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>

 

htmlのlabelタグを使う画像3

 

 

labelを使うときの注意点

最後にラベルタグを使う際の注意点を何点か紹介する。

 

label内にボタンやリンクを含めない

<label>の中に、リンク(<a>)やボタン(<button>)は入れないようにするのが良い。

上記の要素はページの遷移や画面の変化を伴うため、ラベルをクリックしたときに入力欄をアクティブにするのが難しくなるからだ。

 

‍labelは入れ子にできない

<label>の中に<label>を入れないようにする。

 

l‍abel内に見出しタグを含めない

<label>の中では、見出しタグ(<h1>〜<h6>)の使用もできる限り避けるべきだ。

なぜlabel内での見出しタグはダメ?

これはアクセシビリティ上の理由からだ。

一部の読み上げソフトでは、見出しタグ内のテキストを「セクション(文章のまとまり)のタイトル」として認識する。そのため「入力欄の説明」の役割をする<label>と、「セクションのタイトル」の役割をする見出しタグが混在すると、その部分の役割が正しく認識されない可能性があるからだ。

 

関連記事

(CSS) クリック・タッチを無効化「pointer-events: none;」の使い方
px-em-rem-vw-vh

 

http://www.htmq.com/html/label.shtml

 

記事が気に入った方はシェアをお願いします!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です