How to create an HTML checkbox with a clickable label?

10 Apr, 2019
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:
<!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:
<!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:
HTML-Misc
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Types of CSS (Cascading Style Sheet)
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
Installation of Node.js on Linux
How to create footer to stay at the bottom of a Web page?
How do you run JavaScript script through the Terminal?
Node.js fs.readFileSync() Method
How to set space between the flexbox ?