HTML <fieldset>-Tag
Das HTML <fieldset>-Tag gruppiert logisch zusammengehörige Felder in einem Formular visuell. Syntax, Attribute und Beispiele.
Das <fieldset>-Tag fasst logisch zusammengehörige Steuerelemente innerhalb eines HTML-<form>-Formulars zusammen und ermöglicht es, ein langes Formular in übersichtliche Abschnitte zu gliedern. Standardmäßig zeichnet der Browser einen Rahmen um den gruppierten Inhalt. In Kombination mit einem <legend>-Element ist es außerdem die korrekte Methode, einer Gruppe von <input>-Steuerelementen eine gemeinsame, barrierefreie Beschriftung zu geben.
Diese Seite behandelt die Syntax, die Rolle von <legend>, alle Attribute (name, disabled, form), das Umgestalten oder Entfernen des Rahmens sowie die Bedeutung von <fieldset> für barrierefreie Radio- und Checkbox-Gruppen.
Syntax
Das <fieldset>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<fieldset>) und dem schließenden (</fieldset>) Tag geschrieben.
Beispiel des HTML <fieldset>-Tags:
HTML <fieldset>-Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
margin-bottom: 10px;
}
label {
display: inline-block;
width: 120px;
}
fieldset {
background: #e1eff2;
}
legend {
padding: 20px 0;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information:</legend>
<div>
<label for="name">Name:</label>
<input type="text" id="name" />
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" />
</div>
<div>
<label for="date">Date of birth:</label>
<input type="date" id="date" />
</div>
<div>
<label for="birth-place">Place of birth:</label>
<input type="text" id="birth-place" />
</div>
</fieldset>
</form>
</body>
</html>Ergebnis
Das <legend>-Element
Das <legend>-Element gibt dem <fieldset> eine Überschrift. Zwei Regeln sind dabei wichtig:
- Es muss das erste Kind des
<fieldset>sein. Erscheint es an einer anderen Stelle, ignorieren Browser es als Gruppenüberschrift. - Es ist der barrierefreie Name der Gruppe. Assistive Technologien geben den Legend-Text zusammen mit jedem Steuerelement innerhalb der Gruppe aus. Wenn ein Screenreader-Nutzer ein Steuerelement erreicht, hört er etwas wie „Persönliche Informationen — Name, Textfeld", was ihm mitteilt, zu welchem Abschnitt das Feld gehört.
<fieldset>
<legend>Shipping address</legend>
<!-- the inputs for this section go here -->
</fieldset>Ein <fieldset> ohne <legend> zeichnet zwar weiterhin einen Rahmen, aber die Gruppe hat keinen Namen, sodass der Barrierefreiheits-Vorteil entfällt. Fügen Sie immer eine Legend hinzu, wenn die Gruppierung für den Nutzer eine Bedeutung hat.
Das <fieldset>-Element zur Strukturierung von Formularen
Die meisten Online-Formulare sind schwer zu bedienen und unübersichtlich. Die Aufteilung in logische Abschnitte verbessert die Benutzerfreundlichkeit erheblich. Die Verwendung des <fieldset>-Elements zusammen mit dem <legend>-Element schafft klare Grenzen und erleichtert die Navigation in Formularen.
Barrierefreiheit: Gruppierung von Radio-Buttons und Checkboxen
Ein einzelnes Text-<input>-Feld wird durch sein eigenes <label> beschriftet. Eine Gruppe von Radio-Buttons oder Checkboxen benötigt jedoch zwei Beschriftungsebenen: eine für die gesamte Frage und eine für jede Option. <fieldset> + <legend> ist der standardkonforme, barrierefreie Weg dazu — die Legend beschriftet die Frage und jedes <label> beschriftet eine Option.
<fieldset>
<legend>Choose a shipping method:</legend>
<div>
<input type="radio" id="standard" name="shipping" value="standard" />
<label for="standard">Standard (3–5 days)</label>
</div>
<div>
<input type="radio" id="express" name="shipping" value="express" />
<label for="express">Express (1–2 days)</label>
</div>
</fieldset>Hier kündigt ein Screenreader „Versandmethode wählen, Standard, Radio-Button" an — der Nutzer weiß immer, welche Frage er gerade beantwortet. Ohne den <fieldset>/<legend>-Wrapper werden die Optionen als zusammenhanglose Liste vorgelesen. Verwenden Sie dieses Muster für jede Radio-Gruppe und für jede Gruppe zusammengehöriger Checkboxen.
Den Rahmen entfernen oder umgestalten
Der Standard-Rahmen ist nur ein Stil — er ist nicht erforderlich. Eine häufig gestellte Frage ist, wie man ihn entfernt. Setzen Sie border: none auf das <fieldset>:
fieldset {
border: none;
padding: 0;
margin: 0;
}Sie können <legend> und dem Rahmen auch jede beliebige Gestaltung geben (Hintergrund, eigener Rahmen, abgerundete Ecken). Die Gruppierung und ihre Barrierefreiheits-Semantik bleiben unabhängig vom Styling erhalten, sodass Sie den Standard-Look entfernen können, ohne den Nutzen zu verlieren.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| disabled | disabled | Deaktiviert die gesamte Gruppe. Jedes Formularelement innerhalb des <fieldset> wird nicht interaktiv und wird nicht mit dem Formular übermittelt. |
| form | form_id | Verknüpft das Fieldset mit einem oder mehreren Formularen anhand ihrer id, sodass es außerhalb des zugehörigen <form> platziert werden kann. Mehrere IDs werden durch Leerzeichen getrennt. |
| name | text | Der Name der Gruppe. Er wird nicht mit dem Formular übermittelt; er wird hauptsächlich verwendet, um die Gruppe über JavaScript zu referenzieren. |
Das disabled-Attribut ist praktisch, wenn ein ganzer Abschnitt eines Formulars auf einmal deaktiviert werden soll — zum Beispiel, um Zahlungsfelder auszublenden, bis eine Checkbox angehakt wird:
<fieldset disabled>
<legend>Payment details</legend>
<label for="card">Card number:</label>
<input type="text" id="card" />
</fieldset>Das form-Attribut ermöglicht es einem <fieldset>, außerhalb des <form>-Elements zu liegen und trotzdem zu ihm zu gehören:
<form id="signup"></form>
<fieldset form="signup">
<legend>Account</legend>
<label for="user">Username:</label>
<input type="text" id="user" />
</fieldset>Das <fieldset>-Tag unterstützt die globalen Attribute und die Ereignis-Attribute.