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

Question

Ich frage mich, was der Unterschied zwischen den folgenden beiden Code-Schnipseln ist:

Eingabe hier: 

und

Eingabe hier: 

Ich bin mir sicher, dass es etwas bewirkt, wenn Sie eine spezielle JavaScript-Bibliothek verwenden, aber abgesehen davon, validiert es das HTML oder ist es aus einem anderen Grund erforderlich?

Answer 1

Das Tag ermöglicht es Ihnen, auf das Label zu klicken, und es wird behandelt, als ob auf das zugehörige Eingabeelement geklickt wurde. Es gibt zwei Möglichkeiten, diese Verbindung herzustellen:

Eine Möglichkeit besteht darin, das Label-Element um das Eingabeelement herum zu wickeln:

Eingabe hier:

Der andere Weg besteht darin, das for Attribut zu verwenden und ihm die ID des zugehörigen Inputs zu geben:

Eingabe hier:

Dies ist besonders nützlich bei Verwendung von Kontrollkästchen und Schaltflächen, da dies bedeutet, dass Sie das Kontrollkästchen aktivieren können, indem Sie auf den zugehörigen Text klicken, anstatt auf das Kästchen selbst zu klicken.

Erfahren Sie mehr über das Element auf MDN.

Das Verknüpfen von Text mit einer Eingabe ist für die Barrierefreiheit sehr wichtig, da es einen zugänglichen Namen für die Eingabe bereitstellt, sodass unterstützende Technologien diesen für Benutzer mit Behinderungen bereitstellen können. Ein Bildschirmlesegerät würde den Labeltext vorlesen, wenn der Benutzer sich auf die Eingabe konzentriert. Sie könnten auch Ihrer Sprachsteuerungssoftware mitteilen, sich auf diese Eingabe zu konzentrieren, aber dafür benötigt sie einen (sichtbaren) Namen.

Lesen Sie mehr zur Barrierefreiheit

Answer 2

Das for Attribut verknüpft das Label mit einem Steuerelement, wie in der Beschreibung von label in der HTML 4.01 Spezifikation definiert. Dies impliziert unter anderem, dass wenn das label Element den Fokus erhält (z. B. durch Klicken), den Fokus auf sein zugehöriges Steuerelement weiterleitet. Die Verknüpfung zwischen einem Label und einem Steuerelement kann auch von sprachbasierten Benutzeragenten verwendet werden, die dem Benutzer eine Möglichkeit bieten, nach dem zugehörigen Label zu fragen, wenn sie mit einem Steuerelement umgehen. (Die Verknüpfung ist möglicherweise nicht so offensichtlich wie in der visuellen Darstellung.)

Im ersten Beispiel in der Frage (ohne das for) hat die Verwendung der label Auszeichnung keine logische oder funktionale Bedeutung - es ist nutzlos, es sei denn, Sie verwenden es in CSS oder JavaScript.

Die HTML-Spezifikationen schreiben nicht vor, Labels mit Steuerelementen zu verknüpfen, aber die Web Content Accessibility Guidelines (WCAG) 2.0 tun dies. Dies ist in dem technischen Dokument H44: Verwendung von label Elementen zur Verknüpfung von Textlabels mit Formularsteuerelementen beschrieben, das auch erklärt, dass die implizite Verknüpfung (durch Verschachtelung z.B. von input innerhalb von label) nicht so weit verbreitet ist wie die explizite Verknüpfung über die Attribute for und id,

Answer 3

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

Gib hier ein:

Answer 4

Verwendung von label for= in HTML-Formular

Dies könnte es ermöglichen, Label(s) und Objekt optisch zu dissociieren, während sie verknüpft bleiben.

Beispiel: Es gibt ein Kontrollkästchen und zwei Labels.

• Sie könnten das Kontrollkästchen durch Klicken beliebig auf

  • irgendein Label oder
  • auf die Kontrollkästchen,

  aber nicht auf den Text noch den Eingabebereich...

  Es gibt ein Label

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis egestas, velit odio imperdiet eros, sit amet sagittis nunc mi ac neque. Sed non ipsum. Nullam venenatis gravida orci.

  Es gibt ein 2. Label Demo 1

Einige nützliche Tricks

Gleiches Beispiel, aber mit zwei Kontrollkästchen und verschiedenen CSS-Effekten (wie das Schreiben in Text: Dies auswählen oder Dies abwählen reflektiert den Zustand des Kontrollkästchens.).

Mit der Kraft des Stylesheets CSS können Sie viele interessante Dinge tun...

body { background: #DDD; } 
.button:before { content: 'S'; }
.box:before { content: ''; }
label.button   { background: #BBB;
    border-top: solid 2px white;border-left: solid 2px white;
    border-right: solid 2px black;border-bottom: solid black 2px; }

#demo2:checked ~ .but2:before { content: 'Ent'; }
#demo2:checked ~ .but2  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }
#demo2:checked ~ .box2:before { content: ''; }

#demo1:checked ~ .but1  { background: #CCC;
    border-top: solid 2px black;border-left: solid 2px black;
    border-right: solid 2px white;border-bottom: solid white 2px; }

#demo1:checked ~ .but1:before { content: 'Ent'; }
#demo1:checked ~ .box1:before { content: ''; }

Demo 1
Demo 2

wählen 1 - 
wählen 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sem velit, ultrices et, fermentum auctor, rhoncus ut, ligula. Phasellus at purus sed purus cursus iaculis. Suspendisse fermentum. Pellentesque et arcu. Maecenas viverra. In consectetuer, lorem eu lobortis ...

dieses 2. Label für Kasten 1 auswählen - 
dieses andere 2. Label für Kasten 2 auswählen

 auswählen 1
 auswählen 2

Beispielnutzung: Sidebar nur mit CSS umschalten (2. Snippet).

In dieser Antwort verwende ich nur CSS und label for, um eine Seitenleiste hinzuzufügen, die ohne Verwendung von JavaScript-Code umgeschaltet werden kann.

Answer 5

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