Checkbox inside <label>

It would be great if checkbox can be made like this :

<label>
  <input type="checkbox" />
  <span>Check this</span>
</label>

The above code is similar to how switches are made :

<div class="switch">
  <label>
    <input type="checkbox" />
    <span class="lever"></span>
  </label>
</div>

I suggest to remove the current way of making checkboxes and use it under a label tag. Current approach :

<input type="checkbox" id="test5" />
<label for="test5">Red</label>

Pros

• Less confusing (both switch and checkbox will use same approach)
• No need of id tag and for tag. The id tag is important and cannot be wasted as you can scroll to a section of page with it (http://exampl.com/index.html#test5)

There maybe more pros, but I can’t think of any cons 😉

[tomscholz]

Sorry, I have made a mistake here. Thanks for pointing that out 😃

[Dogfalo]

I agree this is a good change. Will add this in a future version.