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

vue-pdf realisiert Online-Dateivorschau

In diesem Artikelbeispiel wird der spezifische Co...

Unterschiede zwischen Windows Server 2008R2, 2012, 2016 und 2019

Inhaltsverzeichnis Allgemeine Versionseinführung ...

Die umfassendste Sammlung von Front-End-Interviewfragen

HTML und CSS 1. Verständnis und Kenntnisse von WE...

Der Unterschied zwischen div und span in HTML (Gemeinsamkeiten und Unterschiede)

Gemeinsamkeiten: Das DIV-Tag und das SPAN-Tag beh...

Einführung in die Verwendung sowie Vor- und Nachteile von MySQL-Triggern

Inhaltsverzeichnis Vorwort 1. Trigger-Übersicht 2...

So konfigurieren Sie den virtuellen Nginx-Host in CentOS 7.3

Experimentelle Umgebung Eine minimal installierte...

Sammlung von MySQL-Fuzzy-Abfrageanweisungen

SQL-Fuzzy-Abfrageanweisung Die allgemeine Fuzzy-A...

So entfernen Sie Wagenrücklaufzeichen aus Text in Linux

Machen Sie sich keine Sorgen, wenn Sie das Wagenr...

Detailliertes Tutorial zur Installation von MySQL unter Linux

MySQL-Downloads für alle Plattformen sind unter M...

Implementierung eines Docker-Cross-Host-Netzwerks (Overlay)

1. Docker-Cross-Host-Kommunikation Zu den hostübe...

Eine eingehende Analyse von MySQL erläutert die Verwendung und die Ergebnisse

Vorwort Bei unserer täglichen Arbeit führen wir m...