【HTML】<label>タグの正しい使い方

【HTML】<label>タグの正しい使い方

はじめに

皆さんは<label>を正しく使用できていますか？
私はこれまで、あまり意識せずに使っていたため、「これって使い方あってるのか？」と疑問に思い、調べてみました。
調べてみると知らなかったことが多く、勉強になったため、記事としてまとめ共有することにしました。

<label>とは

<label>はフォームの要素の見出しを表すタグです。
ユーザーがフォームの要素を識別しやすくするために使用されます。

<label>の使い方

<input>や<textarea>などのフォームの要素に関連付けて使用します。
そのため、<label>を単体で使用するのはHTMLの構文的に不適切です。

<label>にはfor属性があり、この属性に紐づけたいフォームの要素のid属性を指定します。

フォームの要素1個に対して、<label>はn個関連付けることができます。つまり複数関連付けることができます。
しかしながら、<label>1個に対して、フォームの要素は1個しか関連付けることができません。

<label>に関連づけられるタグ以下のとおりです。それぞれのタグの説明は本記事のスコープ外なので割愛します。

• <button>
• <input>
• <meter>
• <output>
• <progress>
• <select>
• <textarea>

<label>を使用するメリット

<label>を使用すると視覚的・プログラム的にフォームの要素とテキストを関連付けられるため、ユーザーがフォームの要素を操作しやすくなります。
例えば、フォーカスを変更した際に読み上げソフトが<label>のテキストを読み上げてくれるようになります。
また、<label>をクリックすると、関連付けられたフォームの要素にフォーカスが当たるようになります。

<label>の実装方法

内包型

<label>の内部にフォームの要素を配置する方法です。
※「内包型」は私が勝手に名付けたものです。

<label for="name">
  名前
  <input id="name" type="text" name="name" />
</label>

ちなみに、この場合は<label>のfor属性と<input>のid属性による関連付けは省略可能です。

<label>
  名前
  <input type="text" name="name" />
</label>

非内包型

<label>の外部にフォームの要素を配置する方法です。
※「非内包型」は私が勝手に名付けたものです。

<label　for="name">名前</label>
<input id="name" type="text" name="name" />

<label>の注意点

<label>の使い方を調べたことにより以下のことがわかりました。

radioやcheckboxは選択肢それぞれを<label>と<input>で表現しますが、グルーピング全体のキャプションをつけたい場合<label>で表すのは不適切です。

なぜならグルーピング全体を表す<label>は関連付けるフォームの要素がないため、<label>のfor属性を指定できないからです。

では、グルーピング全体のキャプションをつける方法はあるのでしょうか？

その場合は<fieldset>と<legend>を使用します。

<fieldset>と<legend>の説明は本記事のスコープ外なので割愛しますが、以下のように記述します。

<fieldset>
  <legend>性別</legend>
  <label><input type="radio" name="sex" value="1">男性</label>
  <label><input type="radio" name="sex" value="2">女性</label>
</fieldset>

まとめ

<label>タグに限らずですが、HTMLタグは正しい使い方を知ることで、より使いやすいサイトを作ることができます。
ここまでHTMLタグについて深く調べてこなかったため、とても勉強になりました。
また、しっかりと調べて理解することで、今後の開発に活かせると感じました。
これからも「たかがHTML、されどHTML」を意識して学習を進めていきます。

参考文献

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