<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: 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> bereitstellt. Es nimmt wenige Attribute an, von denen das bemerkenswerteste form ist, das die id eines <form> auf derselben Seite enthalten kann, sodass Sie das <fieldset> als Teil dieses <form>s machen können, selbst wenn es nicht darin verschachtelt ist, und disabled, mit dem Sie das <fieldset> und seinen gesamten Inhalt auf einmal deaktivieren können.

Dieses Element enthält die globalen Attribute.

disabled

Wenn dieses Boolean-Attribut gesetzt ist, sind alle Formularsteuerelemente, die Nachkommen des <fieldset> sind, deaktiviert. Das bedeutet, sie sind nicht editierbar und werden nicht zusammen mit dem <form> übermittelt. Sie empfangen keine Browserereignisse wie Mausklicks oder fokussierungsbezogene 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, dem Sie das <fieldset> zuordnen möchten, selbst wenn es sich nicht innerhalb des Formulars befindet. Bitte beachten Sie, dass diese 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 an diesen Elementen verwenden. Sie können über JavaScript, mithilfe von HTMLFormElement.elements, überprüfen, welche Elemente mit einem Formular verknüpft sind.

name

Der mit der Gruppe verknüpfte Name.

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

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 display-Wert auf Inline-Ebene stilisiert ist, verhält es sich wie inline-block, ansonsten verhält es sich wie block. Standardmäßig gibt es einen 2px groove-Rand, der den Inhalt umgibt, und eine kleine Menge an Standardabstand. Das Element hat standardmäßig min-inline-size: min-content.

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

Es wird ein anonymes Kästchen geben, das den Inhalt des <fieldset> hält und bestimmte Eigenschaften vom <fieldset> erbt. Wenn das <fieldset> mit display: grid oder display: inline-grid gestylt ist, wird das anonyme Kästchen ein Grid-Formatierungskontext sein. Wenn das <fieldset> mit display: flex oder display: inline-flex gestylt ist, wird das anonyme Kästchen ein Flex-Formatierungskontext sein. Andernfalls wird ein Blockformatierungskontext etabliert.

Sie können das <fieldset> und <legend> gerne in beliebiger Weise gestalten, um 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>

Ergebnis

Dieses Beispiel zeigt ein deaktiviertes <fieldset> mit zwei Steuerelementen darin. Beachten Sie, wie beide Steuerelemente aufgrund der Position in einem deaktivierten <fieldset> deaktiviert sind.

<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