Related Articles

Related Articles

How to create an HTML checkbox with a clickable label?
  • Last Updated : 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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:
    Before clicking the label:

    After clicking the label:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :