Domanda

W3Schools hanno questo da dire su etichette :

  

Il tag <label> definisce un'etichetta per un ingresso elemento.    [enfasi mia]

Questo significa che il seguente codice HTML non è valido?

<!doctype html>
<html>
    <head>
         <title>Example document</title>
    </head>
    <body>
        <label for="x">Label</label> 
        <hr>
        <div id="q" contentEditable="true">Hello</div>
        <hr>
        <div id="x" contentEditable="true">World</div>
    </body>
</html>

Sia Chrome e IE8 dare attenzione a World quando Label viene cliccato, Firefox non è così. Quale è corretta?

È stato utile?

Soluzione

Secondo il W3C si applica ai controlli del form, e controlli dei moduli sono definito come :

  • Pulsanti
  • Le caselle di controllo
  • I pulsanti di opzione
  • Menu
  • Immissione testo
  • File selezionare
  • I controlli nascosti
  • tag object

Quindi FireFox è tecnicamente giusto, anche se mi piacerebbe difficilmente considero essere "rompere" se un browser non ha limitato a quegli elementi.

Altri suggerimenti

La specifica HTML dice merito label attributo "for", "Quando presente, il valore di questo attributo deve essere uguale al valore dell'attributo id di qualche altro controllo dello stesso documento. Quando assente, l'etichetta essendo definito è associato con il contenuto dell'elemento. "

Quindi i riferimenti id in "per" dovrebbe essere quella di un controllo. Che cosa è un controllo? La specifica dice sostanzialmente qualsiasi input è un controllo, come è button, select o object. Così Firefox è tecnicamente giusto -. Un div non è un controllo

Direi che non è stato un uso appropriato del markup, perché la semantica delle etichette è che sono specificamente per i controlli.

  

L'elemento LABEL viene utilizzato per specificare   etichette per i controlli che non hanno   etichette implicite,

http://www.w3.org /TR/html401/interact/forms.html#h-17.9.1

L'ultima specifica WHATWG ha questo da dire:

  

Alcuni elementi, non tutti forma associata, sono classificati come elementi etichettabili. Questi sono elementi che possono essere associati con un elemento etichetta.

     
      
  • button, input (se l'attributo type non è nello stato nascosto), meter, output, progress, select, textarea
  •   
     

...

     

L'attributo for può essere specificato per indicare un controllo di modulo con cui il titolo deve essere associato. Se viene specificato l'attributo, il valore dell'attributo deve essere l'ID di un elemento etichettabili nello stesso albero come elemento label.

(Fonte: https://html.spec.whatwg.org/multipage/ Forms.html.)

In altre parole, lo standard permette solo for attributi per indicare a elementi di uno dei 7 tipi di tag elencati sopra. Il codice HTML esposto nella questione (che utilizza un elemento for per puntare a un div modificabile) è quindi tecnicamente valida HTML sotto la specifica corrente.

Il Nu Html Checker (che è approvato dal WHATWG ) è d'accordo; se si chiede per convalidare il documento HTML dalla questione, si dirà:

  

Errore . Il valore dell'attributo for dell'elemento label deve essere l'ID di un controllo non nascosto forma

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top