毎度忘れるので記事にします。
そもそも<label>
ってなんやねん
MDNによると、「UIのアイテムにキャプションをつけるためのもの」だそうです。
キャプションをつけることができるものは labelableな要素と呼ばれ、以下だそうです。
- button
- input
- meter
- output
- progress
- select
- textarea
じゃあfor属性とは?
labelが「キャプション」である以上、その対象となるアイテムがあります。そのアイテムと、labelを紐づけるための属性です。
labelとlabelableな要素を明示的に結びつける方法
まず、labelableな要素にid
を設定します。
これに対してfor
属性を持つlabelは、ドキュメントの最初に出てきたfor
と同じ値のid
をもつlabelableな要素に関連づけられます。
従って、同じid
をもつlabelableな要素が1つのDOM Treeの中に複数あった場合、最もTreeの上にある要素にlabelは関連づけられるということになります。
ついでに、htmlForとは?
Reactなどではlabelにfor
をsetする際にhtmlFor
という属性を使用します。このhtmlForは、現在のlabelのfor
属性を取得したりセットしたりする属性です。
The htmlFor IDL attribute must reflect the for content attribute.
だそうです。
以下のサイトがかなりわかりやすかったです
for
とid
を明示しない書き方もある
labelの中にlabelableな要素をいれてやると、そもそもfor
もid
も明示しなくてもlabelと関連付けされる。
<label>
Do you like peas?
<input type="checkbox" name="peas" />
</label>