If the w3.org HTML5 form specification contains <input> inside the parent <label>, why do most pages implement them as siblings?

Question

I read the w3.org HTML5 form specification and was surprised to see the following HTML:

<p><label>Customer name: <input name="custname"></label></p> <p><label>Telephone: <input type=tel name="custtel"></label></p> <p><label>E-mail address: <input type=email name="custemail"></label></p> 

Semantically, this bothers me. Wouldn't <label> smarter as a sibling for <input> rather than as its parent?

In the wild, I'm more used to seeing the following configuration:

 <p> <label for="customer_name">Customer name:</label> <input id="customer_name" name="customer[name]"> </p> 

I know that most of the markup is wrong there, but I'm interested in hearing others' thoughts on what should be a proper agreement.

I am correcting myself, but it seems that every markup generator and form helper I used essentially violates the W3 suggestions - even those that claim HTML5 support using client-side validations, etc.

Thoughts?

Answer 1

Both forms are valid, according to the specification:

The for attribute can be specified to indicate the form control with which the signature should be associated. If an attribute is specified, the attribute value must be the identifier of the label-related element associated with the form in the same document as the label element. If an attribute is specified, and the document has an element whose identifier is equal to the value of the for attribute, and the first such element is an element associated with a label, then this element is an element with a label marked with a control.

If the for attribute is not specified, but the label element has an element descendant associated with the form, then the first such descendant in the tree order is the label element marked as a control.

You can use nesting if that makes sense for your markup, or use the for attribute if you cannot use implicit nesting. None of them are more or less correct than the other. I assume that most people prefer to use the for attribute, as this gives the author more flexibility, allowing the two elements to separate from each other.

Answer 2

It says under it:

A label is a signature in the user interface. A signature can be associated with a particular form control, known as a label element with the label "control", either for an attribute or by placing a control form inside the label element itself.

The nested method is often less practical, since the ability to separate the shortcut and input is often useful (for example, when using columns in a form).

Answer 3

This is very well explained here - http://blog.paciellogroup.com/2011/07/html5-accessibility-chops-form-control-labeling/