Is it correct to use the Input tag within a Label tag?

Question

I was taking a look at the tutorial from W3schools, where he’s teaching to use the input of the kind checkbox in Bootstrap.

According to one example, I saw the following code::

<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
  <label><input type="checkbox" value="" disabled>Option 3</label>
</div>

I had never used label with some input inside, because I thought it was more logical to use the label to identify what the input makes, side by side. But now that I’ve seen it on W3schools and the Bootstrap website itself teaches to do by placing the input within the label.

So far I’ve only seen this example with checkbox, but I have some doubts

My question is:

• Wouldn’t that be incorrect? Because that sounds like putting one input within a h1?

• Whichever input can be placed inside a label? Or just the checkbox? Or is that fashion invention bootstrap?

• If this is valid, it is valid only for HTML 5, or for other versions according to W3c?

_{note: I didn’t add the tab bootstrap, because the question is not on that subject, it is just a quote}

Answer 1

Adding a label to a control (text, checkbox, radio, select) is a way to allow accessibility of your page, remember that some people have problems with motor coordination, so it is not simple to hit the click in that box of the checkbox, it is easier to click on the label (text/description) to dis/mark. Government websites are required to provide accessibility mechanisms. This already existed in html4.

See the difference in behavior between the two options:

Marque Aqui sem label <input type="checkbox"> 
<label>Marque Aqui com label <input type="checkbox"></label>

Answer 2

Yes, it is correct if it is what you wish. It is in the HTML 4 specification and in the HTML 5 specification that can put <input> before, after or within the tag/control <label>.

Using this way allows the focus on the <input> is given when the <label> is triggered in some way (a shortcut, for example). it is much easier to use a page mounted in this way.

It doesn’t work if you’re using tables to layout, but you don’t do it, right?

Try clicking on all label below. Of course it is possible to simulate this in the first two with attribute for, then the choice depends on the desired result, mainly in relation to the organization of the layout and stylization applied with CSS.

<div class="checkbox">
  <input type="checkbox" value=""><label>Option 1</label>
</div>
<div class="checkbox">
  <label>Option 2</label><input type="checkbox" value="">
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 3</label>
</div>

I put in the Github for future reference.