why do I need to bind checkbox with a label?

Question

I got a quick question here. Why do we always bind a checkbox id to the for-attribute in a label? Does it have any purpose? If so, can you please list it out? And also its technical advantage.

Thanks in advance, Madhu.

score 4 · Accepted Answer · answered Jun 06 '13 at 18:26

4

You don't always have to bind a checkbox (or any input) id to a label. What it does is allow you to click the label to trigger a click of the checkbox (or input). This also works if the label element wraps the <input> without requiring id/for:

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

answered Jun 06 '13 at 18:26

Explosion Pills

188,624
52
326
405

According to accessibility guidelines, you *always* have to provide a label that is programmatically determinable. But wrapping the `input` element inside `label` is sufficient for this. It’s just a bit unnatural. – Jukka K. Korpela Jun 06 '13 at 19:14
1

@JukkaK.Korpela why is it unnatural? – Explosion Pills Jun 06 '13 at 19:21
An input control is not logically part of its label. – Jukka K. Korpela Jun 06 '13 at 19:25
ExplosionPills and Jukka : thanks a lot for your response. These were the answers that i wanted :) – Madhu Sharan Jun 07 '13 at 20:12

score 0 · Answer 2 · edited May 23 '17 at 12:18

0

Yes it does have a purpose. Basically it allows you to "click" it, it also has use for screen readers.

Answer: Regarding the HTML Label's "For" Property

edited May 23 '17 at 12:18

Community

1
1

answered Jun 06 '13 at 18:26

doitlikejustin

6,293
2
40
68

why do I need to bind checkbox with a label?

2 Answers2