Welche Funktion hat das for-Attribut des HTML-Label-Tags? Einführung in das for-Attribut des Label-Labels

In diesem Artikel werden hauptsächlich einige Funktionen des for-Attributs des HTML-Label-Tags und einige Beispiele für seine Verwendung vorgestellt. Schauen wir uns nun gemeinsam diesen Artikel an

Zuerst nehmen wir a Schauen Sie sich die Einführung des for-Attributs des Label-Tags an:

dient dazu, das Eingabeelement zu bedienen und Tags dafür zu definieren.

Das for-Attribut gibt an, an welches Formularelement die Beschriftung gebunden ist

Es gibt zwei Möglichkeiten, die Beschriftung an das Formularsteuerelement zu binden:

1 . Binden Sie das Formularsteuerelement als Inhalt des Etiketts. Dies ist eine Einsiedlerbindung.

Das for-Attribut wird derzeit nicht benötigt, und das gebundene Steuerelement benötigt das id-Attribut nicht.

Implizite Bindung:

<label>Date of Birth: <input type="text" name="DofB" /></label>

2. Benennen Sie die ID des Zielformulars für das for-Attribut unter der Bezeichnung .

Explizite Bindung:

<label for="SSN">Social Security Number:</label>
<input type="text" name="SocSecNum" id="SSN" />

Warum müssen Sie das for-Attribut zu hinzufügen?

Nachdem das for-Attribut zu hinzugefügt und das Eingabesteuerelement gebunden wurde, kann die Benutzererfahrung für Mausbenutzer verbessert werden.

Dieses Steuerelement wird ausgelöst, wenn auf den Text innerhalb des Beschriftungselements geklickt wird. Das heißt, wenn der Benutzer das Etikett rendert, richtet der Browser den Fokus automatisch auf das Formularsteuerelement, das sich auf das Etikett bezieht.

Es gibt auch die Wirkung des for-Attributs des HTML-Label-Tags:

Die Wirkung des for-Attributs des Label-Tags besteht darin, dass Sie mit „weiblich“ klicken Die Maus erzielt den Effekt der Radioauswahl, hauptsächlich

Dank for=nv und der ID des Eingabetextfelds muss dieser Effekt gleich nv sein

<div>
<label for="nan1">男</label>
<input type="checkbox" id="nan" />
<label for="nv">女</label>
<input type="checkbox" id="nv" />
</div>

Die Wirkung des im Browser angezeigten Codes ist wie folgt:

Das Bild ist ein Kontrollkästchen, das eine Mehrfachauswahl ermöglicht. Jeder kann es für Experimente nutzen.

Sehen wir uns ein Beispiel für das for-Attribut des HTML-Label-Tags an

Ein Formular mit zwei Optionsfeldern mit Beschriftungen:

<form action="demo_form.asp">
<label for="male">php中文网</label>
<input type="radio" name="sex" id="male" value="male"/>
<label for="female">html</label>
<input type="radio" name="sex" id="female" value="female"/>
<input type="submit" value="Submit"/>
</form>

Der Effekt ist wie im Bild dargestellt:

Dieses Bild ist ein Optionsfeld und kann nicht mehrfach ausgewählt werden.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass jeder die Übungsadresse üben kann PHP-Chinese-Website und Übung im Video-Tutorial. Dort können Sie Ihren Code kopieren und den Effekt sehen. Wenn Sie Fragen haben, können Sie diese unten stellen.

【Empfehlung des Herausgebers】

Wie umschließt man das HTML-Code-Tag? Dieser Artikel vermittelt Ihnen ein umfassendes Verständnis der Verwendung von Codephrasen

Ist das HTML-Tbody-Tag ein Element auf Blockebene? Grundlegende Verwendung des HTML-Tbody-Tags

Das obige ist der detaillierte Inhalt vonWelche Funktion hat das for-Attribut des HTML-Label-Tags? Einführung in das for-Attribut des Label-Labels. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!