To make an HTML checkbox with a clickable label means the checkbox gets on/off when the label is clicked.
Below are the methods:
-
Using checkbox inside label tag:
<!DOCTYPE html><html><head><title>Create an HTML checkbox with a clickable label</title><!-- Adding Style to label --><style>.GFG {background-color: white;border: 2px solid black;color: green;padding: 5px 10px;text-align: center;display: inline-block;font-size: 20px;margin: 10px 10px;cursor: pointer;}</style></head><body><h1>GeeksforGeeks</h1><!-- Putting checkbox inside label tag --><labelclass="GFG"><inputtype="checkbox"name="checkbox"value="Geeks">GFG</label></body></html>Output:
Before clicking the label:After clicking the label:
-
Using the for attribute: Create a checkbox using input tag then create a label for the created checkbox using the for attribute.
<!DOCTYPE html><html><head><title>Create an HTML checkboxwith a clickable label</title><!-- Adding Style to label --><style>.GFG {background-color: white;border: 2px solid black;color: green;padding: 5px 10px;text-align: center;display: inline-block;font-size: 20px;margin: 10px 10px;cursor: pointer;}</style></head><body><h1>GeeksforGeeks</h1><!-- Using the for attribute in label --><inputtype="checkbox"name="checkbox"id="checkID"value="Geeks"><labelclass="GFG"for="checkID">GFG</label></body></html>Output:
Before clicking the label:After clicking the label: