htmlcheckboxclicklabel

How to create a checkbox with a clickable label?

How can I create an HTML checkbox with a label that is clickable (this means that clicking on the label turns the checkbox on/off)?

Solution

  • Method 1: Wrap Label Tag

    Wrap the checkbox within a label tag:

        <label>
       <input type="checkbox" name="checkbox" value="value">
       Text
    </label>

    Method 2: Use the for Attribute

    Use the for attribute (match the checkbox id):

    <input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

    NOTE: ID must be unique on the page!

    Explanation

    Since the other answers don't mention it, a label can include up to 1 input and omit the for attribute, and it will be assumed that it is for the input within it.

    Excerpt from w3.org (with my emphasis):

    [The for attribute] explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.

    To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

    Using this method has some advantages over for:

    Demo with some CSS:

    label {
 border:1px solid #ccc;
 padding:10px;
 margin:0 0 10px;
 display:block; 
}

label:hover {
 background:#eee;
 cursor:pointer;
}
    <label><input type="checkbox" />Option 1</label>
<label><input type="checkbox" />Option 2</label>
<label><input type="checkbox" />Option 3</label>