Wofür ist das "Für" in einem Etiketten-Tag?

71

Ich bin gerade auf einen forParameter in einem HTML-Label-Tag gestoßen:

<label for="required-firstname"> First Name </label>
<small>*</small>
<input name="required-firstname" type="text" tabindex="2" 
       id="required-firstname" size="24" maxlength="40">

Ich konvertiere dieses Formular in ein PHP-verarbeitetes Skript. Kann ich die for = -Parameter entfernen? (Und was macht es aus Neugier?)

lynn
quelle

Antworten:

96

Von w3schools.org:

Das Tag definiert eine Bezeichnung für ein Eingabeelement.

Das Label-Element wird für den Benutzer nicht als etwas Besonderes dargestellt. Es bietet jedoch eine Verbesserung der Benutzerfreundlichkeit für Mausbenutzer, da das Steuerelement umgeschaltet wird, wenn der Benutzer auf den Text im Beschriftungselement klickt.

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

HTH!

Wenn ich meine $ .02 als Barrierefreiheits-KMU hinzufüge, ordnet das LABEL neben der Benutzerfreundlichkeit auch das Eingabefeld der richtigen Bezeichnung zu, damit Personen, die Bildschirmleseprogramme verwenden, wissen, wofür das Feld bestimmt ist.

Jonas
quelle
20
+1 if the user clicks on the text within the label element, it toggles the control.
Kamil Lelonek
21

Das HTML-Label-Tag definiert ein Label für ein Formularelement. Sie werden normalerweise mit Kontrollkästchen und Optionsfeldern verwendet. Wenn der Benutzer auf die Beschriftung klickt, wird die Schaltfläche umgeschaltet. Bei einer Texteingabe (und Sie müssen dies überprüfen, um sicherzugehen) wird die Eingabe meiner Meinung nach nur dann fokussiert, wenn der Benutzer auf die Beschriftung klickt.

Bill die Eidechse
quelle
9

Es gibt an, an welches Element diese Bezeichnung gebunden ist. In Ihrem Beispielcode befindet sich die Bezeichnung für das Eingabefeld für den erforderlichen Vornamen . Wenn der Benutzer auf diese Beschriftung klickt, wird der Fokus auf das gebundene Eingabefeld gelegt. Es ist eine Verbesserung der Benutzerfreundlichkeit und ich denke, Sie sollten es besser so lassen, wie es ist. Es ist eine gute Praxis.

Pawel Krakowiak
quelle
8

Das Attribut "für" ist ein notwendiges Element für die Zugänglichkeit Ihres Formulars. Lass es nicht aus. Für jemanden, der einen Screenreader (SR) verwendet, um eine Webseite anzukündigen, bezieht das Attribut "für" das Steuerelement auf das Etikett. Normalerweise blättert ein SR-Benutzer durch ein Formular von einem Steuerelement (das für den SR ein fokussierbares Element ist) zum nächsten. Ohne das Attribut "für" muss der SR-Benutzer den Modus auf dem SR ändern und das Formular durchsuchen, um festzustellen, welches Steuerelement mit welchem ​​Etikett übereinstimmt. Dies kann zeitaufwändig und verwirrend sein. Das Attribut "für" kann auch für unterstützende Technologien in Bezug auf Motorprobleme nützlich sein.

WebAIM.org hat eine großartige Seite, auf der die Auswirkungen von "for" auf die Barrierefreiheit erläutert werden: http://webaim.org/techniques/forms/controls

user3219915
quelle
6

Es bindet die Beschriftung an eine Formularelement-ID. Einige Formularelemente, wie z. B. Kontrollkästchen, können durch Klicken auf ihre Beschriftung aktiviert werden.

VirtuosiMedia
quelle
3

Wenn Sie in einigen Browsern auf einen Text in einem for-Tag klicken, aktivieren Sie das Kontrollkästchen, mit dem er verknüpft ist (dh die for = id), oder legen den Fokus auf dieses Feld. Es ist eine ADA-Sache

Peter Turner
quelle