How to create an HTML checkbox with a clickable label? Last Updated : 10 Apr, 2019 Improve Improve Like Article Like Save Share Report 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 --> <label class="GFG"> <input type="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 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> <!-- Using the for attribute in label --> <input type="checkbox" name="checkbox" id="checkID" value="Geeks"> <label class="GFG" for="checkID"> GFG </label> </body> </html> Output: Before clicking the label: After clicking the label: Like Article Suggest improvement Next How to Make Entire Custom Checkbox/Div Clickable ? Share your thoughts in the comments Add Your Comment Please Login to comment...