<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」を意識して学習を進めていきます。
参考文献
Discussion