Detaillierte Einführung in das Label-Tag in HTML

Einführung in das Label-Tag

Das Label-Tag definiert die Beschriftung (Markierung) für die Eingabe Element, es werden dem Benutzer keine Spezialeffekte angezeigt, ähnlich wie beim Span-Tag. Der größte Unterschied zwischen dem Label-Label und dem Span-Label besteht jedoch darin, dass es die Benutzerfreundlichkeit für Mausbenutzer verbessert und mit bestimmten Formularsteuerelementen verknüpft werden kann.

Nachdem die Beschriftung mit einem bestimmten Formularsteuerelement verknüpft wurde und der Benutzer auf den Text im Beschriftungselement klickt, wird das zugehörige Formularsteuerelement ausgelöst. Das heißt, wenn der Benutzer das Etikett auswählt, richtet der Browser den Fokus automatisch auf das Formularsteuerelement, das sich auf das Etikett bezieht.

Hauptverwendungsszenarien

Das Label-Tag wird häufig zur Verknüpfung mit einem Kontrollkästchen oder einem Optionsfeld verwendet, sodass Sie das Kontrollkästchen aktivieren/deaktivieren können oder Radio, indem Sie auf den Text klicken. Wie in der folgenden Abbildung gezeigt, hat das Klicken auf den Text den gleichen Effekt wie das Klicken auf das vorherige Optionsfeld, dh der anklickbare Bereich des Steuerelements wird vergrößert, da durch Klicken auf die Beschriftung oder das Steuerelement das Steuerelement aktiviert wird Besonders nützlich für Kontrollkästchen und Optionsfelder.

Wie Etikettenetiketten bestimmten Formularelementen zugeordnet werden

Es gibt zwei Hauptmethoden, Etikettenetiketten zuzuordnen: Zuordnung anzeigen Implizite Assoziation mit :

Methode 1: Explizite Assoziation

Die explizite Assoziation erfolgt über das Label-Tag für Eigenschaft das explizit einem anderen Formularsteuerelement zugeordnet ist. Es ist zu beachten, dass der Wert des for-Attributs die id des markierbaren Formularelements im selben Dokument wie das Label-Tag sein muss. Beachten Sie, dass es sich um die ID und nicht um den Namen handelt. Zum Beispiel:

爱好：
<input type=&#39;checkbox&#39; name=&#39;basket&#39; id=&#39;basketball&#39;>   
<label for="basketball">篮球</label>
<input type=&#39;checkbox&#39; name=&#39;football&#39; id=&#39;football&#39;>   
<label for="football">足球</label>

Rendering:

Implizite Assoziation

Implizite Assoziation besteht darin, das Formularsteuerelement direkt auf dem Etikett zu platzieren Innerhalb des Labels darf in diesem Fall das Label label nur ein Formularelement enthalten und mehrere sind nur für das erste gültig. Wie folgt:

<label>点击我可以使文本框获得焦点    <input type=&#39;text&#39; name=&#39;theinput&#39; id=&#39;theinput&#39;></label>

Die Darstellung ist wie folgt: Klicken Sie auf den Text, um das Textfeld zu fokussieren:

Die Vor- und Nachteile der Anzeigeassoziation und implizit Assoziation:

Explizite Assoziationsvorteile:

1. kann die Anzahl der Etikettenverschachtelungsebenen reduzieren
2. Etikettenetiketten und Formulare können sich an verschiedenen Orten befinden

Nachteile der Anzeigezuordnung:

1. Das Steuerelement muss das ID-Attribut definieren
2. Die Beschriftungsbezeichnung und das Formularsteuerelement sind für die Steuerung als Ganzes nicht förderlich

Implizite Assoziationsvorteile:

1. Das Steuerelement muss keine ID definieren
2. Die Beschriftung und das Steuerelement sind bequem als Ganzes zu steuern

Nachteile der impliziten Zuordnung:

1. Anzahl der Verschachtelungsebenen für Beschriftungen erhöht
2. Sie können Beschriftungen und zugehörige Steuerelemente nicht an verschiedenen Orten platzieren

Das Obige ist meine persönliche Meinung zu den beiden Methoden. Sie können sie je nach Bedarf verwenden. Wählen Sie explizit oder implizit.

Browserunterstützung für Label-Tags und zugehörige Formularelemente

Alle gängigen Browser unterstützen Label-Tags. Safari 2 oder früher unterstützt keine Label-Tags.

Die Formularelemente, die zum Anzeigen von Assoziationen verwendet werden können, sind:

• input type="text" Textfeld Wenn auf die Beschriftung geklickt wird, erhält das zugehörige Textfeld den Fokus.
• input type="checkbox" Kontrollkästchen, aktivieren oder deaktivieren Sie das Kontrollkästchen, wenn Sie auf das Etikett klicken.
• input type="radio" Optionsfeld: Wählen Sie das Optionsfeld aus, wenn Sie auf die Beschriftung klicken.
• input type="file" Datei hochladen, das Dialogfeld zur Dateiauswahl wird geöffnet, wenn auf das Tag geklickt wird.
• input type="password" Passwortfeld, das Passwortfeld erhält den Fokus, wenn auf die Beschriftung geklickt wird.
• textarea Textfeld, das Textfeld erhält den Fokus, wenn auf die Beschriftung geklickt wird.
• select Dropdown-Feld: Wenn auf die Beschriftung geklickt wird, erhält das Dropdown-Feld den Fokus, die Optionen des Dropdown-Felds werden jedoch nicht erweitert.

Das Formularattribut des Label-Tags

Das Formularattribut gibt das Formular an, zu dem das Label-Label-Element gehört. Wie unten gezeigt, befindet sich die Beschriftung zwar außerhalb des Myform-Formulars, gehört aber dennoch zum Myform-Formular. Wie folgt:

<form action="http://songguoliang.com/test.html" id="myform">
  <input type="radio" name="sex" id="male" value="male">
  <br>
  <label for="female">女</label>

  <input type="submit" value="提交"></form><label for="male" form="myform">男</label>

Die Darstellung ist wie folgt. Klicken Sie auf „Männlich“, um auch das erste Optionsfeld auszuwählen

Hinweis:
Dieses Formularattribut wurde geändert im Jahr 2016 Am 28. April aus der HTML-Spezifikation entfernt. Skripte können jedoch weiterhin auf die schreibgeschützte Eigenschaft HTMLLabelElement.form zugreifen. Sie gibt das Formular zurück, zu dem das mit der Beschriftung verknüpfte Steuerelement gehört, oder null, wenn die Beschriftung keinem Steuerelement zugeordnet ist oder das Steuerelement nicht Teil des Formulars ist.

Vielen Dank an alle fürs Lesen, ich hoffe, dass Sie viel davon profitieren werden.

Dieser Artikel ist reproduziert von: https://pocket.blog.csdn.net/article/details/72852150

Empfohlenes Tutorial: „HTML-Tutorial“

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in das Label-Tag in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!