Etikett für die Eingabe in anderem Etikett - ist das richtig

Question

Die am besten mit einem Beispiel veranschaulicht:

<label for="myInput">This is an external label</label> 
 

 
<br> 
 

 
<label> 
 
This label is wrapped arround the input 
 
<input type="text" id="myInput"> 
 
</label>

dies in HTML5 ist richtig? Ich verstehe, dass mehrere Labels auf ein Eingabefeld zeigen können, aber ein Label nur auf ein Feld zeigen kann. Im Beispiel sind es zwei Beschriftungen, die auf den gleichen Eingang zeigen, nur einer umschließt den Eingang.

Answer 1

Ist das in HTML5 korrekt?

Ja.

Ich verstehe mehr Etiketten an einem Eingabefeld verweisen können, aber ein Etikett kann nur Punkt auf einem Feld

Ja, wieder.

Aus den Angaben hier: https://www.w3.org/TR/html5/forms.html#the-label-element

Die Beschriftung kann mit einem bestimmten Form-Steuerelement zugeordnet werden, bekannt als das markierte Kontrolletikett Elemente, entweder unter Verwendung des für das Attribut, oder über das Formular-Steuerelement in Putten das Label-Element selbst.

Wenn kein Attribut for ist und das mit seiner label markierbare Steuer verschachtelt ist, dann ist der erste derartige Nachkomme wird seine markierbare Kontrolle. Aber ein label sollte nicht verschachtelt werden mit anderen label s. Die label.control-Eigenschaft gibt das Formularsteuerelement zurück, das diesem Element zugeordnet ist. Umgekehrt ist .labels eine schreibgeschützte Eigenschaft auf beschreibbaren Steuerelementen, die eine nodelist aller anwendbaren Beschriftungen auf diesem Steuerelement zurückgeben.

Beispiel 1:

In dem folgenden Beispiel wird die Eigenschaft gibt einen input.labelsnodeList die sowohl die Etiketten enthält.

var inp = document.getElementById('myInput'); 
 
console.log(inp.labels);

<label for="myInput">This is an external label</label> 
 
<br> 
 
<label> 
 
    This label is wrapped around 
 
    <input type="text" id="myInput"> 
 
</label>

---

Beispiel 2:

In diesem Beispiel habe ich gezielt ein Etikett mit zwei Eingängen verbunden. Beachten Sie, dass nur das erste Attribut, d. H. Das Attribut for, verknüpft wird, und dass das zweite ignoriert wird, obwohl es ein verschachteltes Steuerelement enthält.

var myInput = document.getElementById('myInput'), 
 
    yourInput = document.getElementById('yourInput') 
 
; 
 
console.log(myInput.labels); 
 
console.log(yourInput.labels);

<label for="myInput"> 
 
\t This is an external label 
 
\t <input id="yourInput"> 
 
</label> 
 
<br> 
 
<input type="text" id="myInput">