Button inside a label

It turns out you can make a <button> operate an input, but only if you put the <label> inside the <button>.

<button type="button">
  <label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">

Although this contravenes the W3C specs:

The interactive element label must not appear as a descendant of the button element.
https://www.w3.org/TR/html-markup/label.html

Leave a Comment