<fieldset>: Das Fieldset-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 nur wenige Attribute, von denen die bemerkenswertesten form sind, welches die id eines <form> auf derselben Seite enthalten kann. So kann das <fieldset> Teil dieses <form> sein, auch wenn es nicht darin verschachtelt ist, und disabled, welches es ermöglicht, das <fieldset> und all seinen 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 bedeutet, sie sind nicht editierbar und werden nicht zusammen mit dem <form> übermittelt. Sie werden keine Browsereignisse erhalten, wie Mausklicks oder fokusbezogene Ereignisse. Standardmäßig zeigen Browser solche Steuerelemente grau 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, zu dem das <fieldset> gehören soll, auch wenn es nicht innerhalb des Formulars ist. Bitte beachten Sie, dass die Verwendung davon verwirrend ist – wenn Sie möchten, dass die <input>-Elemente innerhalb des <fieldset> dem Formular zugeordnet sind, müssen Sie das form-Attribut direkt an diesen Elementen verwenden. Sie können überprüfen, welche Elemente über JavaScript einem Formular zugeordnet sind, indem Sie HTMLFormElement.elements verwenden.

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 stilistische Überlegungen für <fieldset>.

Der Wert von display ist standardmäßig block und es erstellt einen Blockformatierungskontext. Wenn das <fieldset> mit einem Ebenenniveau-display-Wert gestylt ist, verhält es sich als inline-block, andernfalls verhält es sich als block. Standardmäßig gibt es einen 2px groove-Rahmen um den Inhalt und eine kleine Menge an Standard-Abstand. Das Element hat standardmäßig min-inline-size: min-content.

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

Es wird eine anonyme Box geben, die den Inhalt des <fieldset> enthält, welches bestimmte Eigenschaften vom <fieldset> erbt. Wenn das <fieldset> mit display: grid oder display: inline-grid gestylt ist, wird die anonyme Box ein Gitterformatierungskontext sein. Wenn das <fieldset> mit display: flex oder display: inline-flex gestylt ist, wird die anonyme Box ein Flexformatierungskontext sein. Andernfalls erstellt es einen Blockformatierungskontext.

Sie können das <fieldset> und <legend> nach Belieben so stylen, dass es zu Ihrem Seitendesign passt.

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, dass beide Steuerelemente aufgrund der Tatsache, dass sie sich in einem deaktivierten <fieldset> befinden, 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