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

Navigation
4

I was taking a look at the W3Schools tutorial, where I'm teaching you how to use% type% input 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 checkbox with some label inside, because I thought it more logical to use input to identify what label does, side by side. But now that I've seen in W3Schools and the Bootstrap site itself teaches you to do so by putting input inside input .

So far I've only seen this example with label , but I have some doubts

My question is:

  • Would not that be incorrect? So does this sound like putting checkbox inside a input ?

  • Can any h1 be placed within a input ? Or just label ? Or is this fashion invention of Bootstrap?

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

> bootstrap since the question is not about this subject, it is just a quote

    
asked by anonymous 25.10.2016 / 13:03

2 answers

4

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

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

It does not work if you're using tables for layout , but you do not do that, right?

Try clicking on all the 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, mainly in relation 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>
    
25.10.2016 / 13:13
5

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's not at all simple to click on that box checkbox, it is easier to click on the label (text / description) to uncheck it. Government websites are required to provide accessibility mechanisms. This already existed in html4.

See the behavior difference between the two options: 

Marque Aqui sem label <input type="checkbox"> 
<label>Marque Aqui com label <input type="checkbox"></label>
    
25.10.2016 / 13:12
Use out-of-function variables Does a large image hamper application performance?