HTML Create a Checkbox With a Clickable Label
learn how to Create a Checkbox With a Clickable Label
Published
HTML Create a Checkbox With a Clickable Label
If you are working on real world website and there is a checkbox for user agreement that only works with if someone directly click on checkbox but now they want that the checkbox should be click even user click on label or text just beside the checkbox.
Problem
<input type="checkbox" name="chkbox" value="true">
<label>Please review and accept the agreement.</label>
There are two possible solutions for this. One is wrap the checkbox inside a label like the following.
Solution-1: Wrap Label Tag
Wrap the checkbox within a label tag.
<label><input type="checkbox" name="chkbox" value="true">Please review and accept the agreement.</label>
The second solution is to use the for attribute of Label element and provide the checkbox id to it. Let’s run the following example to understand more.
Solution-2: Use the for Attribute
<input type="checkbox" name="chkbox1" id="chkbox1" value="true">
<label for="chkbox1">Please review and accept the agreement.</label>