Se la specifica del modulo HTML5 w3.org annida un <input> all'interno di un genitore <label>, perché la maggior parte delle pagine li implementa come fratelli?

Question

Ho letto il w3.org HTML5 form spec, e sono rimasto sorpreso di vedere il seguente codice 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> 

vista semantico, questo mi confonde. Un <label> non avrebbe più senso come un fratello di un <input>, piuttosto che come un genitore?

In natura, sono più abituati a vedere la seguente configurazione:

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

so che una grande maggioranza di markup là fuori non è corretto, ma io sono interessato ad ascoltare i pensieri degli altri su quale dovrebbe essere la corretta convenzione.

Sono corretto, ma sembra che ogni generatore di markup e l'helper di forma che ho usato abbia violato essenzialmente i suggerimenti del W3, anche quelli che richiedono il supporto HTML5, facendo uso di convalide sul lato client e simili.

Pensieri?

Answer 1

Entrambe le forme sono valide, per la specifica:

Il per attributo può essere specificato per indicare un controllo di modulo con cui il titolo deve essere associato. Se l'attributo è specificato, il valore dell'attributo deve essere l'ID di un elemento associato alla forma etichettabile nello stesso documento dell'elemento etichetta. Se l'attributo è specificato e vi è un elemento nel documento il cui ID è uguale al valore dell'attributo for, e il primo di tali elementi è un elemento associato alla forma etichettabile, tale elemento è il controllo etichettato dell'elemento dell'etichetta.

Se l'attributo for non è specificato, ma l'elemento label ha un discendente elemento associato alla forma etichettabile, il primo di tali discendenti nell'ordine delle strutture è il controllo etichettato dell'elemento etichetta.

È possibile utilizzare l'annidamento, se questo ha senso per il markup, oppure utilizzare l'attributo for se non si è in grado di utilizzare l'annidamento implicito. Né è più o meno corretto dell'altro. Presumo che la maggior parte delle persone preferisca usare l'attributo for poiché ciò dà all'autore la massima flessibilità consentendo ai due elementi di essere disaccoppiati l'uno dall'altro.

Answer 2

Sotto che dice:

L'etichetta rappresenta una didascalia in un'interfaccia utente. La didascalia può essere associata a un controllo di modulo specifico, noto come controllo dell'etichetta dell'elemento dell'elemento etichetta, o per l'attributo o il controllo del modulo all'interno dell'elemento etichetta stesso.

Il modo annidato è spesso meno pratico, essendo in grado di separare l'etichetta e l'input è spesso utile (ad esempio quando si utilizzano le colonne nel modulo).

Answer 3

Qui è molto ben spiegato il http://blog.paciellogroup.com/2011/07/html5-accessibility-chops-form-control-labeling/