<fieldset>: Das Field Set-Element

Das <fieldset> HTML-Element wird verwendet, um mehrere Steuerelemente sowie Beschriftungen (<label>) innerhalb eines Webformulars zu gruppieren.

Probieren Sie es aus

<form>
 <fieldset>
 <legend>Choose your favorite monster</legend>
 <input type="radio" id="kraken" name="monster" value="K" />
 <label for="kraken">Kraken</label><br />
 <input type="radio" id="sasquatch" name="monster" value="S" />
 <label for="sasquatch">Sasquatch</label><br />
 <input type="radio" id="mothman" name="monster" value="M" />
 <label for="mothman">Mothman</label>
 </fieldset>
</form>

legend {
 background-color: black;
 color: white;
 padding: 3px 6px;
}
input {
 margin: 0.4rem;
}

Wie das obige Beispiel zeigt, bietet das <fieldset>-Element eine Gruppierung für einen Teil eines HTML-Formulars, mit einem verschachtelten <legend>-Element, das eine Überschrift für das <fieldset> liefert. Es hat nur wenige Attribute, wobei die bemerkenswertesten form sind, das die id eines <form> auf derselben Seite enthalten kann, was es ermöglicht, das <fieldset> Teil dieses <form> zu machen, auch wenn es nicht darin verschachtelt ist, und disabled, mit dem Sie das <fieldset> und seinen gesamten Inhalt auf einmal deaktivieren können.

Attribute

Dieses Element enthält die globalen Attribute.

disabled

Wenn dieses boolesche Attribut gesetzt ist, sind alle Formularsteuerungen, die Nachkommen des <fieldset> sind, deaktiviert, was bedeutet, dass sie nicht bearbeitbar sind und nicht zusammen mit dem <form> übermittelt werden. Sie erhalten keine Browsing-Ereignisse, wie Mausklicks oder fokussbezogene Ereignisse. Standardmäßig zeigen Browser solche Steuerelemente ausgegraut an. Beachten Sie, dass Formularelemente innerhalb des <legend>-Elements nicht deaktiviert werden.

form

Dieses Attribut nimmt den Wert des id-Attributs eines <form>-Elements ein, dem Sie das <fieldset> zuordnen möchten, auch wenn es sich nicht innerhalb des Formulars befindet. Bitte beachten Sie, dass die Verwendung verwirrend ist — wenn Sie möchten, dass die <input>-Elemente innerhalb des <fieldset> dem Formular zugeordnet sind, müssen Sie das form-Attribut direkt auf diese Elemente anwenden. Sie können überprüfen, welche Elemente einem Formular zugeordnet sind, indem Sie JavaScript verwenden, mit HTMLFormElement.elements.

name

Der mit der Gruppe verbundene Name.

Hinweis: Die Beschriftung für das Fieldset wird durch das erste verschachtelte <legend>-Element angegeben.

Stil mit CSS

Es gibt einige spezielle Stilüberlegungen für <fieldset>.

Sein display-Wert ist standardmäßig block, und es etabliert einen block formatting context. Wenn das <fieldset> mit einem inline-Level display-Wert gestylt ist, verhält es sich als inline-block, andernfalls verhält es sich als block. Standardmäßig gibt es einen 2px groove-Rahmen, der den Inhalt umgibt, und eine geringe Menge an Standardabstand. Das Element hat standardmäßig min-inline-size: min-content.

Wenn ein <legend> vorhanden ist, wird es über dem block-start-Rahmen platziert. Das <legend> passt sich automatisch an seine Inhalte an und etabliert ebenfalls einen Formatierungskontext. Der display-Wert wird blockifiziert. (Zum Beispiel verhält sich display: inline als block.)

Es wird einen anonymen Kasten geben, der den Inhalt des <fieldset> hält, der gewisse Eigenschaften vom <fieldset> erbt. Wenn das <fieldset> mit display: grid oder display: inline-grid gestylt ist, dann wird der anonyme Kasten ein Raster-Formatierungskontext sein. Wenn das <fieldset> mit display: flex oder display: inline-flex gestylt ist, dann wird der anonyme Kasten ein Flex-Formatierungskontext sein. Ansonsten etabliert es einen Block-Formatierungskontext.

Sie können das <fieldset> und <legend> nach Belieben gestalten, um es an das Design Ihrer Seite anzupassen.

Beispiele

Basis-Feldset

Dieses Beispiel enthält ein <fieldset> mit einem <legend>, mit einem einzigen Steuerelement darin.

<form action="#">
 <fieldset>
 <legend>Do you agree?</legend>
 <input type="checkbox" id="chbx" name="agree" value="Yes!" />
 <label for="chbx">I agree</label>
 </fieldset>
</form>

Ergebnis

Deaktiviertes Feldset

Dieses Beispiel zeigt ein deaktiviertes <fieldset> mit zwei Steuerelementen darin. Beachten Sie, wie beide Steuerelemente deaktiviert sind, weil sie sich in einem deaktivierten <fieldset> befinden.

<form action="#">
 <fieldset disabled>
 <legend>Disabled login fieldset</legend>
 <div>
 <label for="name">Name: </label>
 <input type="text" id="name" value="Chris" />
 </div>
 <div>
 <label for="pwd">Archetype: </label>
 <input type="password" id="pwd" value="Wookie" />
 </div>
 </fieldset>
</form>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das <legend>-Element
• Das <input>-Element
• Das <label>-Element
• Das <form>-Element