<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 besitzt nur wenige Attribute, wobei form und disabled die bemerkenswertesten sind. form kann die id eines <form> auf derselben Seite enthalten, sodass Sie das <fieldset> zu einem Bestandteil dieses <form> machen können, selbst wenn es nicht darin verschachtelt ist. disabled erlaubt es Ihnen, das <fieldset> und seinen gesamten Inhalt auf einmal zu deaktivieren.

Dieses Element beinhaltet die globalen Attribute.

disabled

Wenn dieses Boolean-Attribut gesetzt ist, sind alle Formularsteuerelemente, die Nachkommen des <fieldset> sind, deaktiviert. Das bedeutet, dass sie nicht bearbeitbar sind und nicht mit dem <form> abgesendet werden. Sie erhalten keine Browsereignisse wie Mausklicks oder Fokus-bezogene 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 an, dessen Bestandteil das <fieldset> werden soll, selbst wenn es nicht innerhalb des Formulars liegt. 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 das form-Attribut direkt auf diesen Elementen verwenden. Sie können überprüfen, welche Elemente mit einem Formular verbunden sind, indem Sie JavaScript verwenden, wie z.B. HTMLFormElement.elements.

name

Der Name, der mit der Gruppe verbunden ist.

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

Es gibt mehrere spezielle Styling-Überlegungen für <fieldset>.

Sein display-Wert ist standardmäßig block, und es etabliert einen Block-Formatierungskontext. Wenn das <fieldset> mit einem Inline-Level-display-Wert gestylt wird, verhält es sich wie inline-block, ansonsten wie block. Standardmäßig gibt es einen 2px groove-Rand um den Inhalt und eine kleine Menge an Standardauffüllung. Das Element hat min-inline-size: min-content standardmäßig.

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

Es gibt ein anonymes Feld, das den Inhalt des <fieldset> hält und gewisse Eigenschaften vom <fieldset> erbt. Wenn das <fieldset> mit display: grid oder display: inline-grid gestylt wird, dann wird das anonyme Feld ein Grid-Formatierungskontext. Wenn das <fieldset> mit display: flex oder display: inline-flex gestylt wird, dann wird das anonyme Feld ein Flex-Formatierungskontext. Ansonsten etabliert es einen Block-Formatierungskontext.

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

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

<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

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

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