<fieldset> HTML-Feldsatz-Element

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, wobei ein verschachteltes <legend>-Element eine Beschriftung für das <fieldset> angibt. Es verfügt über wenige Attribute, von denen die bemerkenswertesten form sind, das die id eines <form> auf derselben Seite enthalten kann, sodass das <fieldset> Teil dieses <form> sein kann, auch wenn es nicht darin verschachtelt ist, und disabled, das es Ihnen ermöglicht, das <fieldset> und seinen gesamten Inhalt auf einmal zu deaktivieren.

Attribute

Dieses Element beinhaltet die globalen Attribute.

disabled

Wenn dieses boolesche Attribut gesetzt ist, sind alle Formularsteuerelemente, die Nachkommen des <fieldset> sind, deaktiviert, d.h. sie sind nicht bearbeitbar und werden nicht zusammen mit dem <form> übermittelt. Sie erhalten keine Browsereignisse, wie Mausklicks oder fokusbezogene Ereignisse. Standardmäßig werden solche Steuerelemente von Browsern ausgegraut dargestellt. Beachten Sie, dass Formularelemente innerhalb des <legend>-Elements nicht deaktiviert werden.

form

Dieses Attribut nimmt den Wert des id-Attributs eines <form>-Elements an, dem Sie das <fieldset> zuordnen möchten, auch wenn es nicht innerhalb des Formulars ist. Beachten Sie bitte, 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 das form-Attribut direkt an diesen Elementen verwenden. Sie können überprüfen, welche Elemente einem Formular zugeordnet sind, indem Sie JavaScript verwenden und HTMLFormElement.elements nutzen.

name

Der Name, der der Gruppe zugeordnet ist.

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

Gestaltung mit CSS

Für <fieldset> gibt es mehrere spezielle gestalterische Überlegungen.

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

Wenn ein <legend> vorhanden ist, wird es über der block-start-Rahmen platziert. Das <legend> passt sich der Größe an und etabliert ebenfalls einen Formatierungskontext. Der display-Wert wird blockiert. (Zum Beispiel verhält sich display: inline als block.)

Es wird ein anonymes Box-Element geben, das den Inhalt des <fieldset> hält, welches bestimmte Eigenschaften vom <fieldset> erbt. Wenn das <fieldset> mit display: grid oder display: inline-grid gestaltet wird, ist das anonyme Box-Element ein Grid-Formatierungskontext. Wenn das <fieldset> mit display: flex oder display: inline-flex gestaltet wird, ist das anonyme Box-Element ein Flex-Formatierungskontext. Andernfalls etabliert es einen Block-Formatierungskontext.

Sie können das <fieldset> und <legend> nach Belieben gestalten, um Ihrem Seitendesign zu entsprechen.

Beispiele

Einfaches Fieldset

Dieses Beispiel beinhaltet ein <fieldset> mit einem <legend>, mit einem einzelnen 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

Spezifikationen

Browser-Kompatibilität

Siehe auch

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