Why do HTML validators care about two inputs inside a label if one of them is hidden from type?

Question

Consider the following markup:

<label> <input type="hidden" name="likes_bacon" value="no" /> <input type="checkbox" name="likes_bacon" value="yes" /> I like bacon </label> 

The W3C HTML validator will throw an error regarding this markup because the label contains more than one input, which is technically invalid.

My question is double: why should the validator care, since the first one is hidden ? User agents (including screen readers - I checked) do not indicate any signs that a hidden field exists, and it is quite often / useful for frameworks to display flags with an accompanying hidden input with the same name to always go through the default value when submitting a form in cases when the form is submitted with the flag checked. Hidden input is also immutable because it is not a user-editable form control.

Secondly, in addition to the possibility of an error in the browser consoles and an unsuccessful check, is there any harm in doing so ? I can think of no reason other than "you shouldn't!"

I suppose this leads to a wider point, which perhaps the input type="hidden" is wrong, as this is not really an input!

I am well aware that you can completely move inputs outside the label and refer to the id flag using the for attribute.

Mismatch: Two input fields inside the same label

Answer 1

Why does the W3C validator say this is invalid? Because it is not valid! Simply and easily. The HTML specification itself says:

A label element can contain at most one descendant of an input , a button element, a select element, or textarea .

Since the specification says that this is not true, the validator will say that this is not true.

Now the reason why the spec says this is because clicking on the shortcut focuses the associated interactive element. When an element has focus , it can accept keyboard input .

By unspoken user interface standards, you can enter only one text field at a time. Since you can enter only one text field, only one form control should receive keyboard input at any time. Because of this, at any time there is only one interactive HTML element with focus.

The focus point of the two elements will not be marked immediately, since there can be only one keyboard input technique.

It also makes no sense to put hidden input inside the label. Since hidden inputs are not controlled by the user, it makes no sense to enter a keyboard on them.

Answer 2

Basically, the reason this error occurs is because the label element should only be associated with a single input element (of any type ). Because of this, only one “form control” can be within the label , like only one that I can specify in the for attribute. Semantically, an input type hidden is still "form control" and therefore may have a label associated with it. The fact that this is not visible is the default CSS issue imposed by the browser, and therefore, although this may not be a good authoring practice, it is entirely possible to have

 <style scoped> input[type=hidden] { display: inline-block; visibility: visible; } </style> <label> Hidden input: <input type="hidden" value="Peek-a-boo!"/> </label> 

You see that the input [type = hidden] is still being entered and therefore is still a form control, and therefore you can still assign a label to it (at least according to the specifications - there may be browser errors with this) . Since this is a form control, it cannot sit next to another form control within the label . Just. As far as I know, there is nothing in the specification that says that the hidden input type cannot contain a label reference.

In the case indicated in the question, the user agent corrected the error by associating only the label with the non-hidden input , but the lesser-known UA can choose a link to either the first or the last "control form", which may not be the intention of the author.

From specification :

The LABEL element can be used to attach information to controls. Each LABEL Element is associated with one shape control.

The for attribute directly associates the label with another control: the value of the for attribute must be the same as the id value of the attribute of the associated control. More than one LABEL can be associated with the same control, creating multiple links through the for attribute.

In your specific case, you can simply move the hidden input from the label like this:

 <input type="hidden" name="likes_bacon" value="no" /> <label> <input type="checkbox" name="likes_bacon" value="yes" /> I like bacon </label>