2009-07-07 10 views
11

W3Schools haben, dies zu sagen über labels:Kann sich ein Label nur auf Eingabeelemente beziehen?

Das <label> Tag ein Etikett für ein Element Eingang definiert. [Hervorhebung von mir]

Bedeutet dies, dass die folgende HTML nicht gültig ist?

<html> 
    <body> 
     <label for="x">Label</label> 
     <hr> 
     <div id="q" contentEditable="true">Hello</div> 
     <hr> 
     <div id="x" contentEditable="true">World</div> 
    </body> 
</html> 

Sowohl Chrome und IE8 Fokus auf World geben, wenn Label geklickt wird, tut Firefox nicht. Welches ist richtig?

Antwort

8

Nach der W3C gilt es Kontrollen auf Formular, und Form Controls sind defined as:

  • Buttons
  • Ankreuzfelder
  • Radiobuttons
  • Menüs
  • Texteingabe
  • Datei auswählen
  • versteckte Kontrollen
  • Object-Tags

So ist FireFox technisch recht, obwohl ich kaum betrachten würde es „zu brechen“, wenn ein Browser es auf diese Elemente nicht beschränken hat.

+0

Semantische Elemente sind ein erster großer Schritt im Internet - daher ist es in der Regel eine gute Übung, sich an Spezifikationen für Screenreader und dergleichen zu halten. – Olga

5

Die HTML-Spezifikation sagt, über label ‚s "für" Attribut nicht implizite Etiketten, "Wenn vorhanden, muss der Wert dieses Attributs mit dem Wert des ID-Attributs eines anderen Steuerelements im selben Dokument übereinstimmen. Wenn es nicht vorhanden ist, wird das definierte Etikett dem Inhalt des Elements zugeordnet."

Also die ID-Referenzen in "für" sollte die eines Steuerelements sein. Was ist eine Kontrolle? Die Spezifikation sagt im Grunde jede input eine Kontrolle ist, wie button ist, select oder object. Also Firefox ist technisch richtig - ein div ist kein Steuerelement.

+0

Sie sagen immer 'id', meinst du nicht' for'? – Motti

+0

Yup, du hast Recht. Bearbeitet, um zu beheben. –