チェックボックスで <label> タグを付けないとクリック範囲が狭まって不便です。<label> タグでチェックボックスを囲めば記述がすっきりします。
常識なのかもしれませんが、自分はこれを知らなくて for は必須だと思い込んでいたので、メモしておきます。
概要
チェックボックスの横に文字を書くだけだと、文字をクリックしても反応しません。
<input type="checkbox" />check1
※ 一昔前はこのような UI をよく見掛けました。
チェックボックスとラベルを関連付けるには、<input> で id 属性を指定して、<label> で for 属性を指定します。
<input type="checkbox" id="check2" /><label for="check2">check2</label>
チェックボックスを <label> で囲めば、関連付けは明確となるため id や for 属性は不要となります。
<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> でも同様です。