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" name="monster" value="K" />    <label for="kraken">Kraken</label><br />    <input type="radio" name="monster" value="S" />    <label for="sasquatch">Sasquatch</label><br />    <input type="radio" 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 bemerkenswertestenform sind, das dieid 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, unddisabled, mit dem Sie das<fieldset> und seinen gesamten Inhalt auf einmal deaktivieren können.

Attribute

Dieses Element enthält dieglobalen 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 desid-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 dasform-Attribut direkt auf diese Elemente anwenden. Sie können überprüfen, welche Elemente einem Formular zugeordnet sind, indem Sie JavaScript verwenden, mitHTMLFormElement.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>.

Seindisplay-Wert ist standardmäßigblock, und es etabliert einenblock formatting context. Wenn das<fieldset> mit einem inline-Leveldisplay-Wert gestylt ist, verhält es sich alsinline-block, andernfalls verhält es sich alsblock. Standardmäßig gibt es einen2pxgroove-Rahmen, der den Inhalt umgibt, und eine geringe Menge an Standardabstand. Das Element hat standardmäßigmin-inline-size: min-content.

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

Es wird einen anonymen Kasten geben, der den Inhalt des<fieldset> hält, der gewisse Eigenschaften vom<fieldset> erbt. Wenn das<fieldset> mitdisplay: grid oderdisplay: inline-grid gestylt ist, dann wird der anonyme Kasten ein Raster-Formatierungskontext sein. Wenn das<fieldset> mitdisplay: flex oderdisplay: 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" 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" value="Chris" />    </div>    <div>      <label for="pwd">Archetype: </label>      <input type="password" 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