<fieldset>: Das Field Set Element
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das <fieldset>
HTML-Element wird verwendet, um mehrere Steuerelemente sowie Labels (<label>
) innerhalb eines Webformulars zu gruppieren.
Probieren Sie es aus
Wie das obige Beispiel zeigt, bietet das <fieldset>
-Element eine Gruppierung für einen Teil eines HTML-Formulars, wobei ein verschachteltes <legend>
-Element eine Beschriftung für das <fieldset>
bereitstellt. Es hat nur wenige Attribute, von denen die bemerkenswertesten form
sind, welches die id
eines <form>
auf derselben Seite enthalten kann, um das <fieldset>
Teil dieses <form>
s zu machen, auch wenn es nicht darin verschachtelt ist, und disabled
, welches es ermöglicht, das <fieldset>
und seinen gesamten Inhalt in einem Schritt zu deaktivieren.
Attribute
Dieses Element enthält die globalen Attribute.
disabled
-
Wenn dieses boolesche Attribut gesetzt ist, sind alle Formular-Steuerelemente, die Nachkommen des
<fieldset>
sind, deaktiviert, was bedeutet, dass sie nicht bearbeitet werden können und nicht zusammen mit dem<form>
gesendet werden. Sie empfangen keine Browser-Ereignisse, wie Mausklicks oder Fokus-bezogene Ereignisse. In der Standardeinstellung zeigen Browser solche Steuerelemente ausgegraut an. Beachten Sie, dass Formular-Elemente innerhalb des<legend>
-Elements nicht deaktiviert werden. form
-
Dieses Attribut nimmt den Wert des
id
-Attributs eines<form>
-Elements an, von dem Sie möchten, dass das<fieldset>
Teil ist, 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>
mit dem Formular verknüpft sind, müssen Sie dasform
-Attribut direkt auf diesen Elementen verwenden. Sie können überprüfen, welche Elemente mit einem Formular verbunden sind, indem Sie JavaScript verwenden undHTMLFormElement.elements
abfragen. name
-
Der Name, der mit der Gruppe verbunden ist.
Hinweis: Die Beschriftung für das Feldset wird durch das erste
<legend>
-Element gegeben, das darin verschachtelt ist.
Gestaltung mit CSS
Es gibt einige spezielle Stilüberlegungen für <fieldset>
.
Sein display
-Wert ist standardmäßig block
, und es etabliert einen Blockformatierungskontext. Wenn das <fieldset>
mit einem Inline-Level-display
-Wert gestylt wird, verhält es sich wie inline-block
, andernfalls wie block
. Standardmäßig gibt es einen 2px
breiten groove
-Rahmen um den Inhalt und eine kleine Menge Standard-Polsterung. 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>
wird entsprechend seinem Inhalt verkleinert und etabliert ebenfalls einen Formatierungskontext. Der display
-Wert wird blockiert. (Zum Beispiel verhält sich display: inline
als block
.)
Es wird eine anonyme Box geben, die den Inhalt des <fieldset>
hält, welche bestimmte Eigenschaften vom <fieldset>
erbt. Wenn das <fieldset>
mit display: grid
oder display: inline-grid
gestylt wird, dann wird die anonyme Box ein Grid-Formatierungskontext sein. Wenn das <fieldset>
mit display: flex
oder display: inline-flex
gestylt wird, dann wird die anonyme Box ein Flex-Formatierungskontext sein. Andernfalls etabliert es einen Blockformatierungskontext.
Sie können das <fieldset>
und <legend>
nach Belieben stylen, um das Design Ihrer Seite zu unterstützen.
Beispiele
Einfaches Fieldset
Dieses Beispiel zeigt ein sehr einfaches <fieldset>
-Beispiel mit einem <legend>
und 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 Fieldset
Dieses Beispiel zeigt ein deaktiviertes <fieldset>
mit zwei Steuerelementen darin. Beachten Sie, wie beide Steuerelemente deaktiviert sind, da 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
Inhaltskategorien | Fließender Inhalt, Abschnittswurzel, aufgeführt, formularassoziiertes Element, greifbarer Inhalt. |
---|---|
Erlaubter Inhalt |
Ein optionales <legend> -Element, gefolgt von fließendem
Inhalt.
|
Auslassung von Tags | Keine, sowohl der startende als auch der endende Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das fließenden Inhalt akzeptiert. |
Implizite ARIA-Rolle | group |
Erlaubte ARIA-Rollen |
radiogroup ,
presentation , none
|
DOM-Schnittstelle | [`HTMLFieldSetElement`](/de/docs/Web/API/HTMLFieldSetElement) |
Spezifikationen
Specification |
---|
HTML Standard # the-fieldset-element |
Browser-Kompatibilität
BCD tables only load in the browser