Is it correct to use the input tag inside a Label tag?

I was taking a look at the W3Schools tutorial, where it is teaching how to use the input of type checkbox in Bootstrap.

According to one of the examples, 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, as I found it more logical to use label to identify what input does, side by side. But now that I've seen on W3Schools and the Bootstrap website itself teaches how to do by putting the input inside label.

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

My doubt is:

  • Wouldn't that be incorrect? For this sounds to me like putting a input inside a h1?

  • Can any input be placed inside a label? Or just the checkbox? Or is this Bootstrap's fashion invention?

  • If this is valid, it is valid only for HTML 5, or for other versions, of deal with W3c?

note : I did not add tab bootstrap , as the question is not about this subject, it is just a quote

Author: Wallace Maxters, 2016-10-25
Source

2 answers

Yes, it's correct if that's what you want. is in the HTML 4 specification and in the HTML 5 specification which can put <input> before, after or within the tag/Control <label>.

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

Doesn't work if you're using tables for layout , but you don't, right?

Try clicking on all label below. Of course it is possible to simulate this in the first two with attribute for, so the choice depends on the desired result, especially with regard to the organization of the layout and the 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 on GitHub for future reference.

 6
Author: Maniero, 2020-03-17 18:55:30

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 on that box checkbox, it is easier to click on the label (text/description) to des/mark. Government websites are required to provide accessibilide 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>
 6
Author: rray, 2016-10-25 11:12:05