2
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 の省略

Last updated at Posted at 2023-11-23

チェックボックスで <label> タグを付けないとクリック範囲が狭まって不便です。<label> タグでチェックボックスを囲めば記述がすっきりします。

常識なのかもしれませんが、自分はこれを知らなくて for は必須だと思い込んでいたので、メモしておきます。

概要

チェックボックスの横に文字を書くだけだと、文字をクリックしても反応しません。

<input type="checkbox" />check1

※ 一昔前はこのような UI をよく見掛けました。

チェックボックスとラベルを関連付けるには、<input>id 属性を指定して、<label>for 属性を指定します。

<input type="checkbox" id="check2" /><label for="check2">check2</label>

チェックボックスを <label> で囲めば、関連付けは明確となるため idfor 属性は不要となります。

<label><input type="checkbox" />check3</label>

※ 一般的な運用(チェックボックスをスクリプトから参照する等)では id 属性が必要ですが、ここではクリックの連動だけを問題にしています。

See the Pen checkbox & label by 七誌 (@7shi) on CodePen.

参考

他の方法として、 <input> を直接 <label> の内側に入れることができますが、この場合は関連付けが明確なので、 for および id 属性は必要ありません。

経緯

自分のサイトを Edge の開発者ツールで見ると、アクセシビリティのエラーが出ていました。そこで「さらに読む」のリンクを見ると、例が示されていました。

The label can also be implicit by wrapping the element around the select:

<label>State: <select></select></label>

※ これは <select> についての説明ですが、<input> でも同様です。

2
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
2
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?