HTML Create a Checkbox With a Clickable Label

• HTML Create a Checkbox With a Clickable Label

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>