Was ist das HTML-Attribut for = "" in <label>?

Ich habe das in jQuery gesehen - was macht es?

<label for="name"> text </label>
<input type="text" name="name" value=""/>

Um das <label>mit einem <input>Element zu verknüpfen , müssen Sie dem <input>ein idAttribut geben. Das <label>benötigt dann ein forAttribut, valuedas mit dem der Eingabe identisch ist id:

<label for="username">Click me</label>
<input type="text" id="username">

Das forAttribut ordnet a <label>einem <input>Element zu. Dies bietet einige wesentliche Vorteile:
1. Der Beschriftungstext wird nicht nur visuell mit der entsprechenden Texteingabe verknüpft. es ist auch programmatisch damit verbunden. Dies bedeutet, dass beispielsweise ein Bildschirmleser das Etikett vorliest, wenn sich der Benutzer auf die Formulareingabe konzentriert, was es einem Benutzer mit unterstützender Technologie erleichtert, zu verstehen, welche Daten eingegeben werden sollten.
2. Sie können auf die zugehörige Beschriftung klicken, um die Eingabe sowie die Eingabe selbst zu fokussieren / zu aktivieren. Diese vergrößerte Trefferfläche bietet einen Vorteil für alle, die versuchen, die Eingabe zu aktivieren, einschließlich derer, die ein Touchscreen-Gerät verwenden.

Alternativ können Sie die Attribute <input>direkt im verschachteln. <label>In diesem Fall werden die Attribute forund idnicht benötigt, da die Zuordnung implizit ist:

<label>Click me <input type="text"></label>

Hinweise:
Einer inputkann mehreren Beschriftungen zugeordnet werden.
Wenn auf a <label>geklickt oder getippt wird und es einem Formularsteuerelement zugeordnet ist, wird das resultierende Klickereignis auch für das zugeordnete Steuerelement ausgelöst.

Zugänglichkeitsbedenken

Platzieren Sie keine interaktiven Elemente wie Anker oder Schaltflächen in einem Etikett. Dies erschwert es den Benutzern, die mit dem Etikett verknüpfte Formulareingabe zu aktivieren.

Überschriften

Das Platzieren von Überschriftenelementen in einem <label>stört viele Arten von Hilfstechnologien, da Überschriften häufig als Navigationshilfe verwendet werden. Wenn der Text des Etiketts visuell angepasst werden muss, verwenden Sie <label>stattdessen CSS-Klassen, die auf das Element angewendet werden.
Wenn ein Formular oder ein Abschnitt eines Formulars einen Titel benötigt, verwenden Sie das <legend>Element in a <fieldset>.

Tasten

Einem <input>Element mit einer type="button"Deklaration und einem gültigen Wertattribut ist keine Bezeichnung zugeordnet. Dies kann tatsächlich dazu führen, dass die Hilfstechnologie die Tasteneingabe analysiert. Gleiches gilt für das <button>Element.

Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Das forAttribut wird in Beschriftungen verwendet. Es bezieht sich auf die ID des Elements, dem diese Bezeichnung zugeordnet ist.

Zum Beispiel:

<label for="username">Username</label>
<input type="text" id="username" name="username" />

Wenn der Benutzer nun mit der Maus auf den usernameText klickt, setzt der Browser den Fokus automatisch in das entsprechende inputFeld. Dies funktioniert auch mit anderen Eingabeelementen wie <textbox>und <select>.

Zitat aus der Spezifikation :

Dieses Attribut verknüpft die zu definierende Bezeichnung explizit mit einem anderen Steuerelement. Wenn vorhanden, muss der Wert dieses Attributs mit dem Wert des ID-Attributs eines anderen Steuerelements im selben Dokument übereinstimmen. Bei Abwesenheit wird die zu definierende Bezeichnung dem Inhalt des Elements zugeordnet.

Was den Grund betrifft, warum Ihre Frage mit jQuery markiert ist und wo Sie gesehen haben, dass sie in jQuery verwendet wird, kann ich nicht beantworten, da Sie nicht viele Informationen angegeben haben.

Möglicherweise wurde es in einem jQuery-Selektor verwendet, um das entsprechende Eingabeelement für eine Label-Instanz zu finden:

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

Ich habe das Bedürfnis, darauf zu antworten. Ich hatte die gleiche Verwirrung.

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

Ich habe das for-Attribut auf dem 'male'-Label in weiblich geändert. Wenn Sie nun auf "männlich" klicken, wird das "weibliche" Radio überprüft.

So einfach ist das.

ein schnelles Beispiel:

<label for="name">Name:</label>
<input id="name" type="text" />

Mit dem for=""Tag können Sie die Eingabe fokussieren, wenn Sie ebenfalls auf die Beschriftung klicken.

Sie verwenden es mit Beschriftungen, um zu sagen, dass zwei Objekte zusammengehören.

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

Dies bedeutet auch, dass durch Klicken auf diese Beschriftung der Wert des Kontrollkästchens geändert wird.

es wird für <label>element verwendet

Es wird mit dem Kontrollkästchen für den Eingabetyp oder Redio verwendet, um beim Klicken auf das Etikett auszuwählen

Arbeitsdemo

Das forAttribut des <label>Tags sollte dem ID-Attribut des zugehörigen Elements entsprechen, um sie miteinander zu verbinden.

Zu Ihrer Information - wenn Sie sich in einer maschinengeschriebenen Umgebung mit z

<label for={this.props.inputId}>{this.props.label}</label>

Sie müssen htmlFor verwenden

<label htmlFor={this.props.inputId}>{this.props.label}</label>

Es wird im <label>Text für HTML verwendet

z.B.

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

Es ordnet die Beschriftung einem Eingabeelement zu. HTML-Tags sollen Benutzern verschiedener Kategorien eine besondere Bedeutung vermitteln. Hier ist, wofür das Label gedacht ist:

1. Für Menschen mit motorischen Behinderungen (auch für allgemeine Mausbenutzer) : Auf richtig verwendete Etiketten-Tags kann geklickt werden, um auf das zugehörige Formularsteuerelement zuzugreifen. Z.B. Anstatt besonders auf das Kontrollkästchen zu klicken, kann der Benutzer auf eine leichter anklickbare Beschriftung klicken und das Kontrollkästchen umschalten.
2. Für Benutzer mit Sehbehinderung: Benutzer mit Sehbehinderung verwenden Bildschirmleseprogramme, die das zugehörige Etiketten-Tag lesen, wenn ein Formularsteuerelement fokussiert ist. Es hilft Benutzern, das Etikett zu kennen, das für sie ansonsten unsichtbar war.

Weitere Informationen zur Kennzeichnung -> https://www.w3.org/TR/WCAG20-TECHS/H44.html

Dies ist das Attribut für das <label>Tag: http://www.w3schools.com/tags/tag_label.asp