<fieldset>

Zuletzt aktualisiert am 4. Februar 2026

Das <fieldset>-Element gruppiert zusammengehörige Formularfelder zu einer logischen Einheit. Es erzeugt standardmäßig einen Rahmen um die enthaltenen Felder und sollte immer zusammen mit einem <legend>-Element verwendet werden, das die Gruppe beschriftet. Das ist besonders nützlich für Formulare mit mehreren thematischen Bereichen, etwa persönliche Daten, Adresse und Zahlungsinformationen.

Grundlagen

• <fieldset> gruppiert Formularfelder logisch und visuell zusammen
• Das erste Kind-Element sollte immer ein <legend> sein, das die Gruppe beschriftet
• Mit dem disabled-Attribut kannst du alle enthaltenen Formularfelder auf einmal deaktivieren
• Browser rendern standardmäßig einen Rahmen um das Fieldset. Das lässt sich mit CSS anpassen
• Screenreader lesen das <legend> als Kontext vor, wenn ein Feld innerhalb des Fieldsets fokussiert wird
• Du kannst mehrere Fieldsets in einem Formular verwenden, um verschiedene Bereiche zu trennen

Syntax

<form>
  <fieldset>
    <legend>Persönliche Daten</legend>
    <label>Name: <input type="text"></label>
    <label>E-Mail: <input type="email"></label>
  </fieldset>
</form>

Attribute

Beispiele

Formular mit mehreren Fieldsets

Ein typisches Registrierungsformular mit getrennten Bereichen für verschiedene Datengruppen:

<form>
  <fieldset>
    <legend>Persönliche Daten</legend>
    <label>Vorname: <input type="text" name="firstname"></label>
    <label>Nachname: <input type="text" name="lastname"></label>
  </fieldset>

  <fieldset>
    <legend>Adresse</legend>
    <label>Straße: <input type="text" name="street"></label>
    <label>PLZ / Ort: <input type="text" name="city"></label>
  </fieldset>
</form>

Deaktiviertes Fieldset

Mit disabled werden alle enthaltenen Felder und Buttons auf einmal deaktiviert: praktisch, wenn ein Bereich erst nach einer bestimmten Auswahl ausfüllbar sein soll:

<form>
  <fieldset>
    <legend>Aktiver Bereich</legend>
    <label>Name: <input type="text"></label>
  </fieldset>

  <fieldset disabled>
    <legend>Deaktivierter Bereich</legend>
    <label>Kreditkarte: <input type="text"></label>
    <button type="button">Zahlen</button>
  </fieldset>
</form>

Radio-Button-Gruppe

Ein häufiger Anwendungsfall: Radio-Buttons mit einem Fieldset gruppieren, damit klar ist, welche Optionen zusammengehören:

<form>
  <fieldset>
    <legend>Zahlungsmethode</legend>
    <label>
      <input type="radio" name="payment" value="paypal">
      PayPal
    </label>
    <label>
      <input type="radio" name="payment" value="credit">
      Kreditkarte
    </label>
    <label>
      <input type="radio" name="payment" value="bank">
      Banküberweisung
    </label>
  </fieldset>
</form>

Barrierefreiheit

Das <fieldset>-Element ist eines der wichtigsten Werkzeuge für barrierefreie Formulare. Screenreader lesen das <legend> als Kontext vor jedem Feld innerhalb des Fieldsets. Wenn ein Nutzer das Feld “Vorname” in einem Fieldset mit der Legend “Persönliche Daten” fokussiert, hört er zum Beispiel “Persönliche Daten, Vorname, Texteingabe”. Das gibt den Feldern Kontext, der sonst fehlen würde.

Für Radio-Button- und Checkbox-Gruppen ist <fieldset> mit <legend> die einzige korrekte Methode, eine gemeinsame Beschriftung zu definieren. ARIA-Attribute wie aria-labelledby auf einem <div> sind ein Workaround, aber <fieldset> ist die native und bevorzugte Lösung.

Achte darauf, Fieldsets nicht zu verschachteln, wenn es nicht inhaltlich notwendig ist. Zu viele verschachtelte Fieldsets machen die Navigation für Screenreader-Nutzer unnötig kompliziert.

Häufige Fehler

Fieldset ohne Legend: Ein <fieldset> ohne <legend> ist semantisch unvollständig. Der Browser zeigt zwar den Rahmen an, aber Screenreader haben keine Beschriftung für die Gruppe. Verwende immer ein <legend> als erstes Kind-Element.

Legend nicht als erstes Kind: Das <legend>-Element muss das erste Kind-Element im <fieldset> sein. Wenn du es nach anderen Elementen einfügst, wird es in manchen Browsern nicht korrekt gerendert und die Barrierefreiheit leidet.

Fieldset nur für visuelles Styling: Manche Entwickler nutzen <fieldset> mit seinem Standard-Rahmen als reine Styling-Box. Das ist semantisch falsch. Wenn du nur einen Rahmen brauchst, verwende ein <div> mit CSS-Border. <fieldset> ist für die logische Gruppierung von Formularfeldern gedacht.

Disabled übersehen bei verschachtelten Fieldsets: Wenn du ein äußeres Fieldset auf disabled setzt, werden auch alle Felder in verschachtelten Fieldsets deaktiviert. Das kann unerwartete Effekte haben, wenn du nur einen Teil deaktivieren wolltest.

Browser-Kompatibilität

Das fieldset-Element wird von allen modernen Browsern vollständig unterstützt. Beachte, dass das Styling (besonders Flexbox/Grid als Display-Wert) in älteren Browsern Einschränkungen haben kann.

Email-Kompatibilität

Formularelemente wie fieldset werden von E-Mail-Clients nicht unterstützt. E-Mail-Clients entfernen Formulare und interaktive Elemente aus Sicherheitsgründen.

Verwandte Elemente