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.

Answer 1

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>

Answer 2

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