Verwenden Sie das Label-Tag, um das Optionsfeld auszuwählen, indem Sie auf den Text klicken

Verwenden Sie das Label-Tag, um das Optionsfeld auszuwählen, indem Sie auf den Text klicken
Das <label>-Tag definiert eine Bezeichnung (Tag) für ein Eingabeelement. Das Beschriftungselement bietet für den Benutzer keine besondere Wirkung. Allerdings verbessert es die Benutzerfreundlichkeit für Mausbenutzer. Dieses Steuerelement wird ausgelöst, wenn Sie auf den Text im Beschriftungselement klicken. Das heißt, wenn der Benutzer das Tag auswählt, verschiebt der Browser den Fokus automatisch auf das mit dem Tag verknüpfte Formularsteuerelement. Das for-Attribut des <label>-Tags sollte mit dem id-Attribut des zugehörigen Elements identisch sein.

Beispiel 1:

Code kopieren
Der Code lautet wie folgt:

<label für="Mann">
<input type="radio" value="Radio" name="man" id="man"/>
männlich
</Bezeichnung>
<label für="man2">
<input type="radio" value="Mann" name="man" id="man2"/>
weiblich
</Bezeichnung>

Beispiel 2:

Code kopieren
Der Code lautet wie folgt:

<input type="checkbox" name="Pages" value="Job" id="Job" ><label for="Job">Jobinformationen hinzufügen und bearbeiten</label>

<input type="checkbox" name="Pages" value="JobQuery" id="JobQuery" &gt;<label for="JobQuery">Rekrutierungsinformationen abfragen und löschen</label>

<input type="checkbox" name="Seiten" value="Technologie" id="Technologie" aktiviert&gt;<label for="Technologie">Technologieelemente hinzufügen oder ändern</label>

<<:  6 Vererbungsmethoden von JS Advanced ES6

>>:  Richtige Methode zum Schreiben leerer Links, um Seitensprünge nach dem Klicken auf ein href #-Problem zu verhindern

Artikel empfehlen

Fallstricke und Lösungen bei der MySQL-Zeitstempelvergleichsabfrage

Inhaltsverzeichnis Fallstricke bei Zeitstempelver...

Drei Möglichkeiten zur Implementierung virtueller Hosts unter Linux7

1. Gleiche IP-Adresse, unterschiedliche Portnumme...

Informationen zur Layoutmethode für Inhaltsüberlauf in Tabellen

Was ist Inhaltsüberlauf? Wenn tatsächlich viel Te...

VUE + SpringBoot implementiert die Paging-Funktion

Dieser Artikel stellt hauptsächlich vor, wie pagi...

Zusammenfassung gängiger Docker-Befehle

Docker-Installation 1. Anforderungen: Linux-Kerne...

Was ist ein MySQL-Index? Fragen Sie, wenn Sie es nicht verstehen

Inhaltsverzeichnis Überblick Vom Binärbaum zum B+...

Master-Slave-Synchronisationskonfiguration der Mysql-Datenbank

Inhaltsverzeichnis Mysql Master-Slave-Synchronisi...

So legen Sie schnell den Dateipfad-Alias ​​in React fest

React ist eine JavaScript-Bibliothek zum Erstelle...

36 Prinzipien der MySQL-Datenbankentwicklung (Zusammenfassung)

Vorwort Diese Prinzipien sind aus tatsächlichen K...

Datendiebstahl mit CSS in Firefox

0x00 Einführung Vor einigen Monaten habe ich eine...

js-Version zur Realisierung der Rechnerfunktion

In diesem Artikelbeispiel wird der spezifische Co...

Die Reihenfolge der Ereignisausführung in der Knotenereignisschleife

Inhaltsverzeichnis Ereignisschleife Ereignisschle...

Anpassungsmethode des Linux-Peripheriedateisystems

Vorwort Wenn wir von Linux-Systemen sprechen, mei...