Should We Put <Input> Inside <Label>

Should I put input elements inside a label element?

From the W3's HTML4 specification:

The label itself may be positioned before, after or around the
associated control.

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

Label for input inside other label - is this correct

Is this correct in HTML5?

Yes.

I understand multiple labels can point at one input field, but a label
can only point at one field

Yes, again.

From the specs here: https://www.w3.org/TR/html5/forms.html#the-label-element

The caption can be associated with a specific form control, known as
the label element's labeled control, either using the for attribute,
or by putting the form control inside the label element itself.

When there is no for attribute and the label is nested with its labelable control, then the first such descendant becomes its labelable control. But, a label should not be nested with other labels.

The label.control property returns the form control that is associated with this element. Vice-versa, .labels is a readonly property on labelable controls which return a nodelist of all applicable labels on that control.

Example 1:

In the example below, the input.labels property returns a nodeList which contains both the labels.

var inp = document.getElementById('myInput');console.log(inp.labels);

<label for="myInput">This is an external label</label><br><label>  This label is wrapped around   <input type="text" id="myInput"></label>

Should a label element have both a for attribute and a nested input element?

Short Answer

Use either not both.

use for="" if you want maximum compatibility
use label wrapping if you want maintainability and cleaner code.

Using both is overkill and increases code complexity.

Using either option is WCAG compliant.

Longer Answer

After a bit of digging I came across this interesting test.

In short, screen readers all behave nicely with both versions but Dragon Naturally Speaking still does not behave well with wrapped labels.

Now I have never seen anything that says using both is actually an accessibility issue, however if you are adding for="" you lose the main benefit of using wrapped labels anyway.

side note - Interestingly we changed our internal guidance earlier in the year to use wrapped inputs as screen reader support was good across the board for our chosen browser / screen reader support combos (after ditching IE8 support, if you need to support IE8 then you need to still use for="" and not wrapped inputs).

I am now going to reverse that decision and will be going back to good old for="" associated labels while we investigate the Dragon issue.

Dragon Naturally Speaking is widely used as Assistive Technology (AT), even though it isn't officially AT.

Does it really matter

I advise people on accessibility, I have to be whiter than white, purer than pure (practice what I preach).

In reality if you want to use wrapped labels because they are easier, then use them, support is 100% of modern browsers (IE9 and above) with screen readers.

If you want to use for="" still then that has the best support. This would be my official recommendation, but I also believe that technology does need to move on and the problem should be addressed by Dragon Naturally Speaking, their excuse of "not being assistive technology" is not valid as they are still covered under the Equality Act 2010, ADA etc. (insert your country specific Disability Equality laws here)

Using both is just overkill and removes most of the benefits of wrapped labels anyway and I don't see the point in using both (other than perhaps the fact that in the future you could then remove the for="" on a wrapped label if Dragon fixes this issue).

Final note

The documentation for this test you linked says in big writing [Deprecated] and links through to this documentation for a replacement test.

I could not see the justification for why they removed the requirement to use both (as I have still not seen evidence that using both causes issues as I stated earlier) but at least this is inline with my recommendation.

Can I put checkbox and hidden input inside a label?

You're right on both counts. From MDN

The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:
<label for="username">Enter your username:</label>
<input id="username">
<label for="username">Forgot your username?</label>
Elements that can be associated with a <label> element include <button>, <input> (except for type="hidden"), <meter>, <output>, <progress>, <select> and <textarea>.

(emphasis mine)

That makes it pretty clear to me that (a) multiple things inside a <label> block is entirely acceptable, and (b) hidden inputs will not be considered targets of the label.

Two input fields inside one label

No, it's not correct (since, as you note, a label is associated with exactly one form input).

To label a group of inputs that belong together, use a <fieldset> and a <legend>:

<fieldset>
  <legend>Range</legend>
  <label for="min">Min</label>
  <input id="min" name="min" />

  <label for="max">Max</label>
  <input id="max" name="max" />
</fieldset>