HTML Label Fieldset Legend

Labels, Fieldsets, Legends – diese drei Elemente machen HTML Formulare barrierefrei und übersichtlich! In diesem Tutorial lernst du, wie du sie richtig einsetzt.

Einführung in das HTML Label Fieldset Tutorial

Was du in diesem Tutorial lernst

Die drei Helfer für bessere Formulare:

<label> – verbindet Beschriftung mit Eingabefeld
<fieldset> – gruppiert zusammengehörige Felder
<legend> – Überschrift für die Gruppe

Warum Label, Fieldset und Legend wichtig sind

Ohne Labels:

Screenreader wissen nicht, was ein Feld bedeutet
Nutzer müssen genau auf die kleine Checkbox klicken

Mit Labels:

Screenreader lesen die Beschriftung vor
Klick auf Text aktiviert das Feld

Voraussetzungen

Benötigte HTML-Kenntnisse

Du solltest HTML-Formulare verstehen. Falls nicht, hol das kurz nach!

Dein Arbeitsplatz Setup

Texteditor und Browser – mehr brauchst du nicht.

Schritt-für-Schritt-Anleitung

Schritt 1: Dein erstes Label erstellen

Das for-Attribut verbindet Label mit Input:

<label for="benutzername">Dein Benutzername:</label>
<input type="text" id="benutzername" name="benutzername">

for und id müssen EXAKT übereinstimmen!

Alternative: Input in Label einschließen:

<label>
  Benutzername:
  <input type="text" name="benutzername">
</label>

Schritt 2: Fieldset für Gruppierungen

Fieldsets fassen zusammengehörige Felder zusammen:

<fieldset>
  <label for="vorname">Vorname:</label>
  <input type="text" id="vorname" name="vorname">
  
  <label for="nachname">Nachname:</label>
  <input type="text" id="nachname" name="nachname">
</fieldset>

Browser zeigen standardmäßig einen Rahmen um Fieldsets.

Schritt 3: Legend als Überschrift

Legend MUSS das erste Element im Fieldset sein:

<fieldset>
  <legend>Persönliche Daten</legend>
  <label for="vorname">Vorname:</label>
  <input type="text" id="vorname" name="vorname">
  
  <label for="nachname">Nachname:</label>
  <input type="text" id="nachname" name="nachname">
</fieldset>

Screenreader lesen die Legend vor, wenn Nutzer das Fieldset betreten!

Schritt 4: Alles zusammen

<form>
  <fieldset>
    <legend>Kontaktdaten</legend>
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email">
    
    <label for="telefon">Telefon:</label>
    <input type="tel" id="telefon" name="telefon">
  </fieldset>
  
  <fieldset>
    <legend>Nachrichtenart</legend>
    <label>
      <input type="radio" name="nachricht" value="anfrage">
      Allgemeine Anfrage
    </label>
    
    <label>
      <input type="radio" name="nachricht" value="beschwerde">
      Beschwerde
    </label>
  </fieldset>
  
  <button type="submit">Absenden</button>
</form>

Code-Beispiele zu HTML

Kontaktformular

Jetzt HTML lernen

<form action="/kontakt" method="post">
  <fieldset>
    <legend>Deine Angaben</legend>
    <label for="name">Vollständiger Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email_kontakt">E-Mail-Adresse:</label>
    <input type="email" id="email_kontakt" name="email" required>
  </fieldset>
  
  <fieldset>
    <legend>Deine Nachricht</legend>
    <label for="betreff">Betreff:</label>
    <input type="text" id="betreff" name="betreff">
    
    <label for="nachricht_text">Nachricht:</label>
    <textarea id="nachricht_text" name="nachricht" rows="5"></textarea>
  </fieldset>
  
  <button type="submit">Nachricht senden</button>
</form>

Adressformular mit zwei Bereichen

<fieldset>
  <legend>Rechnungsadresse</legend>
  <label for="rechnung_strasse">Straße:</label>
  <input type="text" id="rechnung_strasse" name="rechnung_strasse">
  
  <label for="rechnung_plz">PLZ:</label>
  <input type="text" id="rechnung_plz" name="rechnung_plz">
</fieldset>

<fieldset>
  <legend>Lieferadresse</legend>
  <label for="lieferung_strasse">Straße:</label>
  <input type="text" id="lieferung_strasse" name="lieferung_strasse">
  
  <label for="lieferung_plz">PLZ:</label>
  <input type="text" id="lieferung_plz" name="lieferung_plz">
</fieldset>

Häufige Fehler & Troubleshooting

Fehler 1: for und id stimmen nicht überein

FALSCH:
<label for="user">Name:</label>
<input id="username">

RICHTIG:
<label for="username">Name:</label>
<input id="username">

Fehler 2: Legend nicht am Anfang

FALSCH:
<fieldset>
  <label>...</label>
  <legend>Titel</legend>
</fieldset>

RICHTIG:
<fieldset>
  <legend>Titel</legend>
  <label>...</label>
</fieldset>

Fehler 3: Doppelte IDs

Jede ID darf nur EINMAL pro Seite vorkommen!

HTML: Best Practices & Tipps

Barrierefreie Formulare

Immer Labels verwenden – keine Ausnahmen!
Fieldsets für thematische Gruppen
Aussagekräftige Legends

Fieldset disabled

Deaktiviert alle Felder auf einmal:

<fieldset disabled>
  <legend>Nur für Premium-Nutzer</legend>
  ...
</fieldset>

Styling-Tipp

Fieldsets haben Standard-Border. Entferne sie mit CSS:

fieldset { border: none; padding: 0; }

Fazit zum HTML-Tutorial: Was hast du hier gelernt

Du kennst jetzt die drei Formular-Helfer:

<label for="..."> – verbindet Text mit Feld
<fieldset> – gruppiert Felder
<legend> – Überschrift der Gruppe

Mit diesen Elementen werden deine Formulare barrierefrei und übersichtlich!

Bereit für mehr? Lerne als Nächstes, wie du HTML Formular Validierung implementierst!