Das <label>-Element ist ein essenzieller HTML-Tag, um Formulare benutzerfreundlicher zu gestalten. Es bietet eine klare Beschreibung oder Beschriftung für Eingabefelder wie Checkboxen, Textfelder, Auswahlfelder und -listen und vieles mehr. Für Nutzer wird durch ein Label deutlich, was in ein Eingabefeld eingegeben werden soll.

Ein Label hat nicht nur den Vorteil, dass es optisch das Feld beschreibt, sondern es verbessert auch die Benutzerfreundlichkeit und Barrierefreiheit. Besonders Menschen, die Bildschirmlesegeräte (Screenreader) verwenden, profitieren von Labels, da der Zusammenhang zwischen dem Feld und seiner Beschreibung klargemacht wird.

Das Ziel von Labels

Labels zeigen dem Nutzer, welche Eingabe von ihm erwartet wird – in einfacher Sprache und direkt über oder neben einem Eingabefeld. Das <label>-Tag wird also immer direkt mit einem Formularelement verwendet, z. B. mit einer <textarea>. Beim Anklicken des Labels wird das verknüpfte Element, in der Regel ein Eingabefeld für Text, automatisch aktiv (der Cursor springt hinein). Das macht Formulare interaktiver und leichter bedienbar.

In den nächsten Kapitelabschnitten zum Thema Formulare, werden wir uns alle Formularfelder ansehen, mit denen Labels verknüpfbar sind.

Wie verwendet man ein Label?

Damit ein Label mit etwa einem Texteingabefeld verknüpft ist, wird das Attribut „for“ im <label>-Tag genutzt. Der Wert von „for“ muss dabei immer identisch sein mit dem Attribut „id“ des Ziel-Elements (in diesem Fall die textarea).

Hier ein einfaches Beispiel:

<form>
  <label for="feedback">Dein Feedback:</label><br>
  <textarea id="feedback" rows="4" cols="50"></textarea>
</form>

• for="feedback": Dieses Attribut im Label zeigt an, dass es zur Textarea mit der id="feedback" gehört.
• Wenn du auf den Text „Dein Feedback:“ klickst, wird die Textarea aktiviert (so als ob Du direkt in das Feld geklickt hättest).

In den kommenden Kapiteln werden wir immer mit Labeln arbeiten, sodass Du Dir gut einprägen kannst, wie es eingesetzt wird.

Warum sind Labels wichtig?

1. Bessere Bedienbarkeit
   Labels machen Formulare einfacher zu bedienen. Nutzer können entweder direkt auf das Eingabefeld oder auf das Label klicken, um das Feld zu aktivieren.
2. Barrierefreiheit
   Menschen mit Behinderungen, die Screenreader verwenden, können so besser verstehen, worum es in einem Eingabefeld geht. Der Screenreader liest das Label vor und erklärt, welches Feld dazu gehört.
3. Klarheit
   Labels sorgen dafür, dass jeder Nutzer sofort erkennt, wofür ein bestimmtes Feld gedacht ist.

Verknüpfen von Formularelementen: Zwei Möglichkeiten

Es gibt zwei Wege, wie man ein Label mit einem Formularelement verknüpfen kann:

1. Mit dem for-Attribut

Das for-Attribut im Label verlinkt das Label mit einem Formularelement über dessen „id“-Attribut.

Beispiel:

<form>
  <label for="comments">Deine Kommentare:</label><br>
  <textarea id="comments" rows="6" cols="50"></textarea>
</form>

• Das Label ist mit dem Textarea verbunden. Klicke auf „Deine Kommentare:“ und das Textarea wird automatisch aktiv.

2. Das Label umschließt das Formularelement

Alternativ kann das Label direkt um das Formularelement platziert werden. Dadurch wird die Verknüpfung automatisch hergestellt, und man benötigt kein „for“-Attribut.

Beispiel:

<form>
  <label>
    Deine Nachricht:
    <textarea rows="5" cols="40"></textarea>
  </label>
</form>

Hier ist die Verknüpfung dadurch gegeben, dass die Textarea innerhalb des Label-Tags liegt. Nutzer können also auf den Text „Deine Nachricht:“ klicken, um die Textarea zu aktivieren.

Verwendungsbeispiele: Wann kommen Labels zum Einsatz?

Labels werden überall dort verwendet, wo Eingabefelder vorkommen. Im Zusammenhang mit einer Textarea gibt es viele praktische Einsatzmöglichkeiten. Hier sind einige Beispiele:

1. Feedback-Formular

Nutzer geben ihre Meinung zu einem Produkt oder einer Dienstleistung ab. Ein Label sorgt dafür, dass das Textfeld klar beschriftet ist:

<form>
  <label for="feedback">Dein Feedback zum Produkt:</label><br>
  <textarea id="feedback" rows="5" cols="50"></textarea>
</form>

• Das Label beschreibt eindeutig, dass Feedback zum Produkt gefragt ist.

2. Kontaktformular

In einem Kontaktformular möchte eine Firma, dass Kunden eine Nachricht hinterlassen. Das Label macht klar, worum es geht:

<form>
  <label for="contact-message">Deine Nachricht an uns:</label><br>
  <textarea id="contact-message" rows="8" cols="50" ></textarea>
</form>

• Das Label „Deine Nachricht an uns:“ beschreibt, was hier eingegeben werden soll.
• Der Benutzer kann sofort erkennen, dass er eine längere Nachricht schreiben kann, weil das Textfeld entsprechend groß ist.

3. Fehlerbeschreibung

Ein Kunde meldet ein Problem und beschreibt es in einer Textarea. Auch hier sorgt ein Label für Klarheit:

<form>
  <label for="error-description">Beschreibe dein Problem:</label><br>
  <textarea id="error-description" rows="6" cols="50"></textarea>
</form>

Das Label macht sofort klar, dass der Nutzer hier eine Fehlerbeschreibung abgeben soll.

Best Practices bei Labels

Hier sind einige Tipps, um Labels sinnvoll zu verwenden:

1. Sei eindeutig: Schreibe klare und kurze Beschriftungen. Der Nutzer sollte schnell verstehen, was erwartet wird.
2. Achte auf die Verknüpfung: Das Label sollte immer mit einem Eingabefeld verknüpft sein – entweder mit for und einer id oder durch das Einbetten des Feldes.
3. Vermeide Redundanz: Wenn das Eingabefeld schon erklärt, wofür es da ist (z. B. durch einen Platzhalter), sollte das Label diese Information nur ergänzen, nicht wiederholen. Mit Platzhaltern werden wir uns in den nächsten Unterkapiteln beschäftigen.
4. Nutze Platzierung bewusst: Ein Label steht oft über oder links neben einem Eingabefeld, am häufigsten rechts neben Checkboxen. Halte den Abstand minimal, damit jedes Label klar einem Feld zugeordnet ist.
5. Verwende Strukturelemente (z. B. „<br>“) bis auf die Formularelemente selbst ausschließlich außerhalb des Labels, niemals innerhalb.
   • Verständlichkeit: Wenn das „<br>“-Element außerhalb des <label>-Tags steht, bleibt klarer, dass das <br> nicht zum beschriftenden Text des Labels gehört, sondern nur ein layoutbezogenes Element ist.
   • Barrierefreiheit: Screenreader könnten je nach Implementierung das <br> im <label> als Bestandteil des Labels interpretieren, was unter Umständen zu unerwünschtem Verhalten führt.

Kurze Zusammenfassung:

Das <label>-Tag in HTML ist eine einfache, aber mächtige Möglichkeit, Formulare für alle Nutzer einfacher zu machen. Zusammen mit Eingabefeldern sorgt es dafür, dass diese klar beschriftet und leichter zugänglich sind. Die Verknüpfung mit for oder das direkte Einbetten des Eingabeelements macht das Formular benutzerfreundlich und barrierefrei. Egal ob Feedback, Kontaktformulare oder andere Anwendungen – das Label ist unverzichtbar, um Klarheit und Bedienkomfort zu sichern.