Javascript-Label

| | | | | | | | | | | | | | | | | |

Das HTML-Label-Tag wird verwendet, um eine Beschriftung fur ein Element in einem HTML-Formular zu definieren. Sie werden mit dem Tagaufgerufen und sind mit einem bestimmten Webformular verknupft. Wenn sie angeklickt werden, kann der Benutzer mit einem Formular interagieren.

Wenn Sie Formulare in HTML erstellen, möchten Sie möglicherweise den Feldern in einem Formular eine Beschriftung hinzufugen. Sie möchten beispielsweise, dass ein Formularfeld, in dem nach dem Vornamen eines Kunden gefragt wird, die Überschrift Vorname: enthält.

Hier wird der HTML-< Das Tag label> wird verwendet. Das Tag wird verwendet, um eine Beschriftung fur ein Formularsteuerelement in einem HTML-Formular zu definieren. Jedes Label ist einem bestimmten Element in einem Formular zugeordnet.

In diesem Tutorial wird anhand von Beispielen erläutert, wie das HTML-Label-Tag verwendet wird, um einem Formular ein Label hinzuzufugen. Am Ende dieses Tutorials sind Sie ein Experte im Erstellen von Formularetiketten mit HTML.

HTML-Label

Das -Tag Fugt einem bestimmten Formularelement in einem Formular ein Label hinzu. Jedes Label-Tag ist uber das HTML-Attribut for mit einem Formularelement verknupft.

Es gibt einige Grunde, warum die Verwendung des Tags wichtig. Zunächst wird das Etikett an ein bestimmtes Formularfeld auf einer Webseite gebunden. Das heißt, wenn ein Screenreader auf das Formularfeld stößt, wird dem Benutzer der Inhalt des von Ihnen angegebenen Labels vorgelesen. Dies wiederum macht Ihre Website zugänglicher.

Außerdem kann der Benutzer, wenn ein -Tag mit einem Formularfeld verknupft ist, auf den Text darin klicken das Etikett, um das Formular zu aktivieren. Dies erleichtert dem Benutzer die Interaktion mit einem Formularfeld, da er nicht direkt auf das Element klicken muss.

Wenn Sie beispielsweise ein Kontrollkästchenelement ohne -Tag hätten, musste der Benutzer direkt in das Kontrollkästchen klicken, um das Element zu aktivieren , wenn Sie ein -Tag angegeben haben, kann der Benutzer auch auf das Label klicken, um das Kontrollkästchen zu aktivieren.

HTML-Label-Syntax

Die Syntax fur das HTML-Tag lautet wie folgt:

Das for-Attribut wird verwendet, um ein Label einem bestimmten -Element zuzuordnen. Der Wert des Attributs for sollte gleich dem input-Attribut id sein, das von einem -Element verwendet wird.

Sie können auch ein -Feld in ein Label einfugen, um das Eingabeformular dem Label zuzuordnen, anstatt das Attribut for zu verwenden. Die Syntax dafur ist wie folgt:

Das HTML-Tag unterstutzt alle globalen Attribute in HTML. Daruber hinaus wird das Tag in allen gängigen Browsern unterstutzt.

HTML-Label-Beispiele

Angenommen, wir erstellen ein Webformularfeld, das fragt einen Benutzer fur seine E-Mail-Adresse.

Wir möchten, dass das Formularfeld mit der Bezeichnung Wie lautet Ihre E-Mail-Adresse? Es gibt zwei Ansätze, die wir verwenden können, um diese Aufgabe zu erfullen: das Attribut for oder verwenden Sie ein verschachteltes Label.

for Attribut

Wir könnten den folgenden Code verwenden, um dieses Label mit dem for-Attribut:

Unser Code gibt Folgendes zuruck:


Lassen Sie uns unseren Code aufschlusseln.

In der ersten Zeile haben wir ein -Tag zum Hinzufugen verwendet das Label Wie lautet Ihre E-Mail-Adresse? zu unserem Webformular. Wir haben das Attribut for angegeben und ihm den Wert email_address zugewiesen, der das Label mit unserem Formularfeld mit der ID email_address verknupft.

Am Ende der Zeile haben wir ein
-Tag verwendet, um eine leere horizontale Zeile in unseren Code einzufugen.

In der nächsten Zeile haben wir mit dem Tag ein Texteingabefeld erstellt. Dieses Eingabefeld hat die ID email_address, mit dem wir dem Eingabefeld ein Label zuordnen.

Verschachteltes Label

Alternativ können wir ein . verwenden -Tag in einem -Tag verschachtelt, um unser Label zu erstellen. Hier ist der Code, den wir verwenden wurden, um ein verschachteltes Label fur unser obiges Webformular zu erstellen:

Unser Code gibt Folgendes zuruck:

Unser Formular ist visuell wie in unserem ersten Beispiel, in diesem Beispiel verwenden wir jedoch nicht den fur -Attribut, um unser Etikett mit unserem Formular zu verknupfen. Stattdessen platzieren wir unser -Tag innerhalb eines -Tags, das die beiden HTML-Tags miteinander verbindet.

HTML-Label Barrierefreiheit

Beim Entwerfen eines Etiketts mit dem Tag sollten Sie einige Hinweise zur Barrierefreiheit beachten.

Zuerst die Überschriften sollte nicht innerhalb eines -Tags platziert werden. Dies liegt daran, dass Überschriftenelemente in -Tags die Bildschirmlesetechnologien und andere Tools zur Förderung der Barrierefreiheit im Web beeinträchtigen können. Wenn Sie also einer Formularbeschriftung eine Überschrift hinzufugen möchten, sollten Sie dies außerhalb von -Tags tun.

Zweitens sollten Sie keine Schaltflächen oder Links innerhalb eines -Tags. Dies liegt daran, dass interaktive Elemente innerhalb eines -Tags fur den Benutzer verwirrend sein können, um die Funktionsweise des Webformulars zu verstehen. Wenn eine Schaltfläche beispielsweise in einem verfugbar ist, kann der Benutzer denken, dass er auf die Schaltfläche klicken muss, um mit dem Webformular zu interagieren.

Schlussfolgerung

Das HTML-Tag wird zum Erstellen von Formularlabels verwendet. Diese Labels sind mit einem bestimmten Webformular verknupft , und, wenn darauf geklickt wird, ermöglichen Sie dem Benutzer, mit einem Formular zu interagieren.

In dieser Anleitung wurde anhand von Beispielen die Verwendung des HTML- . erläutert -Tag, um einem Formularelement Labels hinzuzufugen, sowie Bedenken hinsichtlich der Barrierefreiheit im Zusammenhang mit dem -Tag. Jetzt haben Sie das nötige Wissen, um wie ein Profi mit Labels in HTML zu arbeiten!