it-swarm.com.de

Was bewirkt das Attribut "for" im HTML-Tag <label>?

Ich frage mich, was der Unterschied zwischen den folgenden zwei Codeausschnitten ist:

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

und

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

Ich bin mir sicher, dass es etwas bewirkt, wenn Sie eine spezielle JavaScript-Bibliothek verwenden, aber überprüft es ansonsten den HTML-Code oder ist es aus einem anderen Grund erforderlich?

354
jeff

Mit dem Tag <label> können Sie auf die Beschriftung klicken. Dies wird so behandelt, als würden Sie auf das zugehörige Eingabeelement klicken. Es gibt zwei Möglichkeiten, diese Zuordnung zu erstellen:

Eine Möglichkeit besteht darin, das label-Element um das input-Element zu wickeln:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

Die andere Möglichkeit besteht darin, das Attribut for zu verwenden und ihm die ID der zugeordneten Eingabe zu geben:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

Dies ist besonders nützlich für die Verwendung mit Kontrollkästchen und Schaltflächen, da Sie das Kontrollkästchen aktivieren können, indem Sie auf den zugehörigen Text klicken, anstatt das Kontrollkästchen selbst zu aktivieren.

Weitere Informationen zu diesem Element finden Sie in MDN .

531
Barmar

Das Attribut for verknüpft die Beschriftung mit einem Steuerelement, wie in der Beschreibung von label in der HTML 4.01-Spezifikation definiert. Dies impliziert unter anderem, dass das Element label, wenn es den Fokus erhält (z. B. durch Anklicken), den Fokus an das zugehörige Steuerelement weitergibt. Die Zuordnung zwischen einem Etikett und einem Steuerelement kann auch von sprachbasierten Benutzeragenten verwendet werden, die dem Benutzer die Möglichkeit geben, bei der Bearbeitung eines Steuerelements nach dem zugeordneten Etikett zu fragen. (Die Zuordnung ist möglicherweise nicht so offensichtlich wie beim visuellen Rendern.)

Im ersten Beispiel der Frage (ohne for) hat die Verwendung von label keine logische oder funktionale Auswirkung - es ist nutzlos, es sei denn, Sie tun etwas in CSS oder JavaScript damit.

HTML-Spezifikationen machen es nicht obligatorisch, Beschriftungen Steuerelementen zuzuordnen, aber WCAG 2.0 (Web Content Accessibility Guidelines). Dies wird im technischen Dokument H44: Verwenden von Beschriftungselementen zum Zuordnen von Textbeschriftungen zu Formularsteuerelementen beschrieben. Dies erklärt auch, dass die implizite Zuordnung (durch Verschachteln von z. B. input in label) nicht so weit verbreitet ist wie die explizite Assoziation über die Attribute for und id,

45

Kurz gesagt, es bezieht sich auf das id der Eingabe, das ist alles:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">
13
user4133690

Das for-Attribut des <label> -Tags sollte gleich dem id-Attribut des zugehörigen Elements sein, um sie miteinander zu verbinden.

4
Rahul Tripathi