<fieldset>

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.

Steckbrief <fieldset>

Kategorie: Formulare
Art: Block
Attribute: 3
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 04.02.2026

Grundlagen

6 Punkte

<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

index.html

Grundsyntax

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

Attribute

3 Attribute

Attribut und Beispiel	Beschreibung
`disabled` Boolean disabled	Deaktiviert alle Formularelemente innerhalb des Fieldsets. Die Werte deaktivierter Felder werden beim Absenden nicht übertragen.
`form` String form="myForm"	ID des zugehörigen Formulars. Ermöglicht ein Fieldset außerhalb des form-Elements, das trotzdem zum Formular gehört.
`name` String name="personal"	Name des Fieldsets, kann für JavaScript-Zugriff über form.elements verwendet werden.

Beispiele

3 Beispiele

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

index.html

Mehrere Fieldsets

<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>

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

index.html

Disabled Fieldset

<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>

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

index.html

Radio-Gruppe

<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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Keine

Entfernt Formularelemente.
Gmail

Keine

Entfernt fieldset und legend komplett.
Outlook

Keine

Keine Unterstützung für Formularelemente.
Thunderbird

Keine

Formularelemente werden nicht gerendert.
Yahoo Mail

Keine

Entfernt Formularelemente aus dem HTML.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<fieldset>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter