0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

labelのforとinputのidの関係性の備忘録

Last updated at Posted at 2023-09-04

毎度忘れるので記事にします。

そもそも<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属性を取得したりセットしたりする属性です。

HTML Living Standardsによると、

The htmlFor IDL attribute must reflect the for content attribute.

だそうです。
以下のサイトがかなりわかりやすかったです

foridを明示しない書き方もある

labelの中にlabelableな要素をいれてやると、そもそもforidも明示しなくてもlabelと関連付けされる。

<label>
  Do you like peas?
  <input type="checkbox" name="peas" />
</label>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?