<fieldset>: Das Field Set-Element

<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: #000;
  color: #fff;
  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 Beschriftung für das <fieldset> liefert. Es hat wenige Attribute, wobei form das bemerkenswerteste ist, welches die id eines <form> auf derselben Seite enthalten kann und es Ihnen ermöglicht, das <fieldset> zu einem Teil dieses <form> zu machen, auch wenn es sich nicht darin befindet. Das Attribut disabled ermöglicht es Ihnen, das <fieldset> und all seine Inhalte auf einmal zu deaktivieren.

Dieses Element enthält die globalen Attribute.

disabled

Wenn dieses Boolean-Attribut gesetzt ist, sind alle Formularsteuerungselemente, die Nachfahren des <fieldset> sind, deaktiviert. Das bedeutet, dass sie nicht bearbeitet werden können und nicht zusammen mit dem <form> übermittelt werden. Sie werden keine Browsing-Ereignisse wie Mausklicks oder fokusbezogene Ereignisse empfangen. Standardmäßig werden solche Steuerelemente in Browsern ausgegraut angezeigt. 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, selbst wenn es nicht innerhalb des Formulars ist. Beachten Sie, dass die Nutzung verwirrend sein kann — wenn Sie möchten, dass die <input>-Elemente innerhalb des <fieldset> mit dem Formular verknüpft sind, müssen Sie das form-Attribut direkt auf diesen Elementen verwenden. Sie können überprüfen, welche Elemente mit einem Formular verknüpft sind, indem Sie JavaScript und HTMLFormElement.elements verwenden.

name

Der mit der Gruppe assoziierte Name.

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

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

Sein display-Wert ist standardmäßig block und es etabliert einen Blockformatierungskontext. Wenn das <fieldset> mit einem zeilenweiser display-Wert gestylt wird, verhält es sich wie inline-block, andernfalls wie block. Standardmäßig gibt es einen 2px groove-Rand, der den Inhalt umgibt, und eine kleine Menge an Standard-Abstand. Das Element hat min-inline-size: min-content als Standard.

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

Es wird einen anonymen Kasten geben, der den Inhalt des <fieldset> hält, welcher bestimmte Eigenschaften vom <fieldset> erbt. Wenn das <fieldset> mit display: grid oder display: inline-grid gestylt wird, dann wird der anonyme Kasten ein Rasterformatierungskontext sein. Wenn das <fieldset> mit display: flex oder display: inline-flex gestylt wird, dann wird der anonyme Kasten ein Flexformatierungskontext sein. Andernfalls etabliert es einen Blockformatierungskontext.

Sie können das <fieldset> und <legend> in jeder gewünschten Weise gestalten, um es an das Design Ihrer Seite anzupassen.

Dieses Beispiel enthält ein <fieldset> 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>

Resultat

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>

Resultat

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