<fieldset>: Das Feldset-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> bereitstellt. Es nimmt wenige Attribute an, von denen die bemerkenswertesten form sind, das die id eines <form> auf derselben Seite enthalten kann, sodass Sie das <fieldset> Teil dieses <form> machen können, auch wenn es nicht darin verschachtelt ist, und disabled, was es Ihnen ermöglicht, das <fieldset> und dessen gesamten Inhalt auf einmal zu deaktivieren.

Dieses Element enthält die globalen Attribute.

disabled

Wenn dieses boolesche Attribut gesetzt ist, sind alle Formularsteuerelemente, die Nachfahren des <fieldset> sind, deaktiviert, das heißt, sie sind nicht bearbeitbar und werden nicht zusammen mit dem <form> übermittelt. Sie erhalten keine Browsereignisse, wie Mausklicks oder fokusbezogene 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, dem Sie das <fieldset> zuordnen möchten, auch wenn es nicht innerhalb des Formulars ist. Bitte beachten Sie, dass die Nutzung verwirrend ist — wenn Sie möchten, dass die <input>-Elemente im <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, mit HTMLFormElement.elements.

name

Der Name, der mit der Gruppe assoziiert ist.

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

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

Der display-Wert ist standardmäßig block, und es wird ein Blockformatierungskontext erstellt. Wenn das <fieldset> mit einem Displaywert auf Inline-Niveau gestylt wird, verhält es sich wie ein inline-block, andernfalls verhält es sich wie ein block. Standardmäßig gibt es einen 2px groove-Rand um den Inhalt und eine kleine Menge an Standardabstand. Das Element hat standardmäßig min-inline-size: min-content.

Wenn ein <legend> vorhanden ist, wird es über den block-start-Rand platziert. Das <legend> wird in der Größe angepasst und erstellt ebenfalls einen Formatierungskontext. Der display-Wert wird in einen Block verwandelt. (Zum Beispiel verhält sich display: inline wie block.)

Es wird eine anonyme Box geben, die den Inhalt des <fieldset> hält, welche bestimmte Eigenschaften vom <fieldset> erbt. Wenn das <fieldset> mit display: grid oder display: inline-grid gestylt ist, wird die anonyme Box ein Grid-Formatierungskontext. Wenn das <fieldset> mit display: flex oder display: inline-flex gestylt ist, wird die anonyme Box ein Flex-Formatierungskontext. Andernfalls wird ein Blockformatierungskontext erstellt.

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

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

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