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

382

Ich frage mich, was der Unterschied zwischen den folgenden zwei Codefragmenten 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 sicher, dass es etwas bewirkt, wenn Sie eine spezielle JavaScript-Bibliothek verwenden, aber abgesehen davon, validiert es den HTML-Code oder ist es aus einem anderen Grund erforderlich?

html forms input label Jeff
quelle

Antworten:

578

Mit dem <label>Tag können Sie auf die Beschriftung klicken, und es wird wie das Klicken auf das zugehörige Eingabeelement behandelt. Es gibt zwei Möglichkeiten, diese Zuordnung zu erstellen:

Eine Möglichkeit besteht darin, das Beschriftungselement um das Eingabeelement zu wickeln:

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

Der andere Weg ist die Verwendung der for Attribut und ihm die ID der zugehörigen 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 drücken zu müssen.

Lesen Sie mehr über dieses Element in MDN .

Barmar
quelle
106
Beachten Sie, dass das for-Attribut durch das id-Attribut an die Eingabe gebunden ist und das name-Attribut nicht übereinstimmen muss. <label for = "theinput"> Hier eingeben: </ label> <input type = 'text' name = 'notmatching' id = 'theinput'> Funktioniert immer noch
Glo
4
Ein Klick auf die Beschriftung wird nicht immer genau so behandelt wie ein Klick auf das zugehörige Element. Wenn Sie beispielsweise in Chrome und Safari auf eine Beschriftung klicken, die mit einer verknüpft ist, wird selectder Fokus nur auf die Auswahl gelegt, anstatt die Optionen zu erweitern.
Emile Pels
2
@EmilePels Was das Ereignismodell des Browsers betrifft, sind sie gleichwertig. Was Sie beschreiben, ist mehr über die Benutzeroberfläche, die durch die Behandlung von Dropdown-Menüs durch das Betriebssystem bereitgestellt wird, die an die Maus selbst gebunden sind.
Barmar
3
Es scheint wichtig zu erwähnen, dass es für die Barrierefreiheit und Bildschirmleser sehr relevant ist, warum es aktiv genutzt wird.
Coyotte508
1
Ich hatte die letzten zwei Stunden Probleme damit, dass der Klick des Körpers jedes Mal zweimal ausgelöst wurde, wenn ich auf eine Beschriftung in einem Formular mit dem Attribut "für" in einem Eingabefeld klickte. Ich verstehe endlich, warum, selbst wenn ich stopPropagation beim Klicken auf das Etikett verwende, der Klick des Körpers immer noch ausgelöst wurde ... aufgrund des Klicks, den das Eingabefeld nach dem von Ihnen beschriebenen Verhalten ausgelöst hat.
Samuel
53

Das forAttribut ordnet die Beschriftung einem Steuerelement zu, wie in der Beschreibung labelin der HTML 4.01-Spezifikation definiert. Dies impliziert unter anderem, dass das labelElement , wenn es den Fokus erhält (z. B. durch Klicken), den Fokus an das zugehörige Steuerelement weiterleitet. Die Zuordnung zwischen einem Etikett und einem Steuerelement kann auch von sprachbasierten Benutzeragenten verwendet werden, die dem Benutzer die Möglichkeit geben, beim Umgang mit einem Steuerelement zu fragen, was das zugeordnete Etikett ist. (Die Assoziation ist möglicherweise nicht so offensichtlich wie beim visuellen Rendern.)

Im ersten Beispiel in der Frage (ohne das for) hat die Verwendung von labelMarkup keine logischen oder funktionalen Auswirkungen - es ist nutzlos, es sei denn, Sie tun etwas damit in CSS oder JavaScript.

HTML-Spezifikationen machen es nicht zwingend erforderlich, Beschriftungen Steuerelementen zuzuordnen, Web Content Accessibility Guidelines (WCAG) 2.0 jedoch. Dies wird im technischen Dokument H44 beschrieben: Verwenden von Beschriftungselementen zum Zuordnen von Textbeschriftungen zu Formularsteuerelementen , in dem auch erklärt wird, dass die implizite Zuordnung (z. B. durch Verschachteln z. B. inputinnerhalb label) nicht so umfassend unterstützt wird wie die explizite Zuordnung über forund idAttribute.

Jukka K. Korpela
quelle
10
+1 für das Sprechen über die semantische Beziehung und was sie über die funktionale Klickbeziehung hinaus bedeutet.
ulty4life
Hallo, ich habe zwei Elemente mit der gleichen ID, aber in unterschiedlichen Div. Ich habe das Fokusereignis mit der Bezeichnung für hinzugefügt, aber im zweiten Element konzentriert es sich auf das erste Element. <html> <body> <div id = "first_div"> <label for = "name"> Name </ label> <input type = "text" id = "name"> </ div> <div id = "second_div "> <label for =" name "> Name </ label> <input type =" text "id =" name "> </ div> </ body> </ html>
LoveToCode
14

Kurz gesagt, es bezieht sich auf iddie 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">
Uwe Keim
quelle
6
Das Hinzufügen eines for ist wichtig, auch wenn sie benachbart sind. Ich erinnere mich an das Hören, dass einige Bildschirmleser für Sehbehinderte ansonsten Probleme haben. Wenn Sie also mit denen freundlich sein möchten, die möglicherweise alternative Browser / Screenreader verwenden, verwenden Sie diese Methode.
bean5
3

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

Rahul Tripathi
quelle
7
Ja, aber was meinst du mit "zusammenbinden"? Sie sind bereits Nachbarn in der HTML-Struktur. Das verstehe ich nicht.
Jeff
1
FOR Gibt an, an welches Formularelement eine Beschriftung gebunden ist
Rahul Tripathi
2
@CengizFrostclaw jsfiddle.net/DmSGh --- Klicken Sie auf beide Texte "Hier eingeben " und sehen Sie, was passiert.
JJJ
1
@CengizFrostclaw: - Ein Label kann entweder mit dem Attribut "for" an ein Element gebunden werden
Rahul Tripathi
1
Es gibt einige nette Funktionen, zum Beispiel wenn Sie Optionsfelder verwenden. Durch Klicken auf das Etikett wird das Optionsfeld tatsächlich umgeschaltet. Dies ist eine nette Funktion, wenn Sie versuchen, Optionsfelder mit einer benutzerdefinierten Benutzeroberfläche zu verwenden.
Alex
0

Das Attribut for zeigt an, dass diese Bezeichnung für ein zugehöriges Eingabefeld oder ein Kontrollkästchen oder ein Optionsfeld oder ein anderes damit verbundenes Dateneingabefeld steht. zum Beispiel

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>
Pax
quelle
0

Es kennzeichnet jede Eingabe, die der Parameter für das forAttribut ist.

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>
Erweitern Sie das Snippet

pythag0ras_
quelle