【HTML】for属性でlabelを関連付ける為の使い方

このページについて

このページではHTMLで使う事ができるfor属性の機能と使い方を解説しています。

for属性はlabelタグとoutputタグの2つで使う事ができる属性になります。これは特定の別要素と関連付けをするために必須の属性となっています。

まず、最も基本的なlabelタグの書き方は以下のようになります。

<label>ラベル名<input type="checkbox"></label>
<label>ラベル名</label><input type="checkbox">

2つのパターンを書きましたが、どちらも正常に機能します。

ラベル名ラベル名
1つ目はlabelタグの中にinputタグを仕込むという物ですが、これはかなり安定した使い方で、ユーザーに対しても良いアクセシビリティを提供します。2つ目はラベルとチェックボックスが分離していますが、いろんなサイトを見てるとこのような書き方で紹介されているのが多いと思います。

1つ目のパターンはラベル名の部分をタップやクリックしてもチェックボックスが反応しますが、2つ目は全く反応しません。それを解消するために関連付けが必要なんですが、その機能を持っているのがforということになります。

for属性は「labelタグにfor属性を付与し、inputタグにはid属性を付与する」という使い方をします。そして重要なポイントとして、同じ値を使用します。

今回は例がわかりやすいように極端な組み方をしますが、実際はこんな極端な組み方はしなくても大丈夫です。

<div>
<label for="label1">ラベル名</label>
</div>
<input id="label1" type="checkbox">

divタグは空のブロック要素を定義する的なタグです。中身はラベルタグ1つだけですが、for属性でlabel1を指定しています。そしてdivの外側にあるinputタグのidはlabel1です。このように同じ値を設定する事で、たとえブロック要素で遮られていても関係なく操作する事ができるようになります。

ラベル名

ラベル名、チェックボックスどちらもクリック可能かつどちらも同じように反応すると思います。

HTMLにはform属性というものがありますが、form属性はformタグとの関連付けを定義する属性です。このfor属性はフォームに関係なく、ラベルと入力エリアを関連付ける事ができるのでこちらをメインに覚えてしまった方がいいかもしれません。

for属性はinputタグとlabelタグを関連付けるために必要な属性です。ラベルタグ内に要素を配置すれば必要はありませんが、ラベルと入力要素が離れる場合は必ず設定しておきましょう。