Detaillierte Analyse des for-Attributs des -Tags in HTML

Dieser Artikel stellt Ihnen eine detaillierte Analyse des for-Attributs des -Tags vor. Ich hoffe, dass er für Sie hilfreich ist.

Im Abschnitt Create a Set of Radio Buttons des HTML-Tutorials auf Freecodecamp habe ich diese Passage gesehen:

Es gilt als bewährte Methode, ein for-Attribut für das Label-Element festzulegen, mit einem passenden Wert der Wert des id-Attributs des Eingabeelements. Dies ermöglicht unterstützenden Technologien, eine verknüpfte Beziehung zwischen der Bezeichnung und dem untergeordneten Eingabeelement zu erstellen.

Bedeutet wahrscheinlich: Die beste Vorgehensweise besteht darin, label label, add zu geben das for-Attribut mit demselben Wert wie das input-Attribut des id-Tags, um eine Zuordnung zwischen Beschriftung und Eingabe herzustellen.

Gleichzeitig wird ein Beispielcode wie folgt angegeben:

<!-- Code 1 -->
<label> 
  <input>Indoor 
</label>

Im Code der for-Attributwert von label und die id von input Die Attributwerte sind gleich. Aus diesem Code geht nicht klar hervor, wo die Verbindung besteht.

Die Definition des for-Attributs von label lautet wie folgt:

Das for-Attribut gibt an, an welches Formularelement ein Label gebunden ist.
Übersetzung: Das for-Attribut gibt an, an welches Element im Formular das Label gebunden ist ist gebunden.

Beispielcode:

<!-- Code 2 -->

     Male   
     Female   
     Other   
  

Beim Vergleich der beiden Codeteile ist es nicht schwer zu finden,

1. label Es unterscheidet sich von der Einschlussbeziehung von Eingabe-Tags. Die Beschriftung und Eingabe von Code 1 gehören zu einer inklusiven Beziehung, während die Beschriftung und Eingabe von Code 2 relativ unabhängig sind.

2. Beschriftung und Eingabe sind auf der Seite unterschiedlich angeordnet. Mit den Entwicklertools von Chrome ist es nicht schwer herauszufinden, dass in den laufenden Ergebnissen von Code 1 das Label-Label das Eingabe-Label überdeckt und in den laufenden Ergebnissen von Code 2 das Label-Label dem Eingabe-Label gegenübersteht.

3. Label entspricht der Eingabe eins zu eins. Klicken Sie auf den Etiketteninhalt und die entsprechende Single-Ended-Schaltfläche wird ausgewählt.

Wenn wir das for-Attribut von label in den beiden Codeteilen löschen, bleiben die vorherigen Punkte 1 und 2 unverändert und die Änderung ist Punkt 3. Für die Operationsergebnisse von Code 1 können Sie weiterhin das Optionsfeld auswählen, indem Sie auf den Etiketteninhalt klicken. Code 2 ist anders. Durch Klicken auf den Inhalt des Etiketts kann das Optionsfeld nicht ausgewählt werden.

Nach einem einfachen Vergleich der Ergebnisse der Codeausführung können wir überprüfen, ob die am Anfang des Artikels zitierte Passage korrekt ist. Das Hinzufügen des for-Attributs zum Label kann die Codequalität verbessern.

Empfohlene verwandte Artikel:

So lösen Sie das Problem der Tag-Verschachtelung in HTML

Das Standardverhalten des übergeordneten Elements -Tag Und die Interaktion zwischen Klickereignissen

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse des for-Attributs des -Tags in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!