HTML-Eingabebeschriftung

Einführung

Das HTML <label>-Tag wird verwendet, um einer beliebigen HTML-Element auf der Webseite eine Überschrift oder eine Beschriftungstext hinzuzufügen. In diesem Lab werden wir lernen, wie das <label>-Tag in HTML verwendet wird.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Hinzufügen einer Beschriftung zu einem Eingabeelement

1. Öffnen Sie die Datei index.html in Ihrem bevorzugten Texteditor.
2. Fügen Sie den folgenden Code hinzu, um ein Eingabeelement mit einer Beschriftung zu erstellen:

<label for="name">Name:</label> <input type="text" id="name" name="name" />

3. Das for-Attribut des label-Elements sollte mit dem id-Attribut des zugehörigen Eingabeelements übereinstimmen.

Verwenden des label-Elements, um eine klickbare Fläche zu erstellen

1. Öffnen Sie die Datei index.html in Ihrem bevorzugten Texteditor.
2. Fügen Sie den folgenden Code hinzu, um eine klickbare Fläche um ein Eingabefeld zu erstellen:

<label>
  <input type="checkbox" />
  Klicken Sie hier, um auszuwählen
</label>

3. Wenn Sie jetzt auf den Text "Klicken Sie hier, um auszuwählen" klicken, wird die Kontrollbox ausgewählt.

Assoziieren einer Beschriftung mit einem Formularelement

1. Öffnen Sie die Datei index.html in Ihrem bevorzugten Texteditor.
2. Fügen Sie den folgenden Code hinzu, um ein Formularelement mit einer Beschriftung zu erstellen:

<form action="/" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <input type="submit" value="Absenden" />
</form>

3. Das for-Attribut des label-Elements sollte mit dem id-Attribut des zugehörigen Formularelements übereinstimmen.

Gestalten einer Beschriftung

1. Öffnen Sie die Datei index.html in Ihrem bevorzugten Texteditor.
2. Fügen Sie den folgenden Code hinzu, um ein Beschriftungselement mit einer CSS-Klasse zu erstellen:

<label class="large-label" for="name">Name:</label>
<input type="text" id="name" name="name" />

3. Fügen Sie den folgenden CSS-Code zu Ihrer Stylesheet hinzu, um die Beschriftung zu gestalten:

.large-label {
  font-size: 24px;
  font-weight: bold;
}

Verwenden des label-Elements, um die Barrierefreiheit zu verbessern

1. Öffnen Sie die Datei index.html in Ihrem bevorzugten Texteditor.
2. Fügen Sie den folgenden Code hinzu, um ein Eingabeelement mit einer Beschriftung für die Zugänglichkeit von Bildschirmlesern zu erstellen:

<label for="name">Name:</label>
<input
  type="text"
  id="name"
  name="name"
  aria-label="Geben Sie Ihren Namen ein"
/>

3. Das aria-label-Attribut liefert eine textuelle Beschriftung für das Eingabeelement, die für Bildschirmleser zugänglich ist.

Zusammenfassung

In diesem Lab haben wir gelernt, wie man das HTML-<label>-Tag verwendet, um Beschriftungen oder Bezeichnertexte zu HTML-Elementen auf einer Webseite hinzuzufügen. Das <label>-Tag ist nützlich, um die Zugänglichkeit zu verbessern und die klickbare Fläche eines Elements zu erhöhen. Wir haben auch gelernt, wie man Beschriftungen mit Formularelementen assoziiert und Beschriftungen mit CSS gestaltet.