HTML Element - `fieldset`

Gruppiert zusammengehörige Eingabeelemente innerhalb eines Formulars.

Beispiel

<form>
<fieldset>
<legend>Mitglieder Daten</legend>
<label for="vname">Vorname</label>
<input type="text" id="vname" name="vname">

<label for="fname">Nachname</label>
<input type="text" id="fname" name="fname">
</fieldset>
</form>

Definition und Verwendung

Das fieldset-Tag dient dazu, zusammengehörige Elemente in einem Formular form zu gruppieren.

Das fieldset-Tag umgibt die zusammengehörigen Elemente mit einem Rahmen.

Mit dem legend-Tag kann eine Beschriftung für das fieldset-Element hinzugefügt werden.

Attribute

Attribute erweitern Elemente um zusätzliche Eigenschaften oder Informationen und beeinflussen deren Bedeutung, Verhalten oder Darstellung. Sie bestehen in der Regel aus einem Attributnamen und einem zugehörigen Wert, wobei die zulässigen Attribute vom jeweiligen Element abhängen und teils allgemein, teils elementbezogen definiert sind.

Eine besondere Gruppe bilden die aria-*-Attribute, die zur Unterstützung der Barrierefreiheit zusätzliche Informationen für assistive Technologien bereitstellen.

Attribute-Tabelle
Attribut	Wert	Beschreibung
disabled	deaktiviert	Gibt an, dass eine Gruppe zusammengehöriger Formularelemente deaktiviert werden soll.
form	Formular ID	Gibt an, zu welchem Formular das Feldset gehört.
name	Text	Gibt einen eindeutigen Namen für das Fieldset an.

Unterstützung von Global- und Event-Attribute

Das fieldset-Tag unterstützt auch Global- und Event-Attribute.

Standardbrowser CSS

Webbrowser wenden auf viele Elemente vordefinierte CSS-Stile an, die eine grundlegende Struktur und Lesbarkeit sicherstellen. Umfang und Ausgestaltung dieser Standardstile können je nach Browser variieren, etwa in Bezug auf Abstände, Schriftgrößen oder die Darstellung einzelner Elemente.

fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);
}

Beispiel mit CSS

<!DOCTYPE html>
<html>
<head>
<style>
form {
width: 75%;
margin: auto;
}
fieldset {
padding: 36px 12px;
border: solid 1px #00008b;
border-radius: 7px;
background-color: #ccccff;
}
legend {
text-align: center;
background-color: #00008b;
color: #ffffff;
padding: 6px 10px 8px;
border-radius: 5px;
}
</style>
</head>

<body>

<form>
<fieldset>
<legend>Mitglieder Daten</legend>
<label for="vname">Vorname</label>
<input type="text" id="vname" name="vname">

<label for="fname">Nachname</label>
<input type="text" id="fname" name="fname">
</fieldset>
</form>

</body>
</html>

Browserunterstützung

Die Unterstützung von Elementen und Attributen ist in den gängigen modernen Browsern weitgehend einheitlich gewährleistet. Unterschiede können dennoch in Details, im Einführungszeitpunkt neuer Funktionen oder bei experimentellen Features auftreten.

Diese Tabelle zeigt die Unterstützung des `fieldset` durch gängige Webbrowser und ordnet dessen Verfügbarkeit im aktuellen Browserumfeld ein.
Element	Firefox	Internet Explorer / Edge	Safari	Chrome	Opera
`<fieldset>`