<fieldset>: Das Field Set-Element

Wie das obige Beispiel zeigt, bietet das <fieldset>-Element eine Gruppierung für einen Teil eines HTML-Formulars, wobei ein verschachteltes <legend>-Element eine Überschrift für das <fieldset> bereitstellt. Es hat nur wenige Attribute, von denen die bemerkenswertesten form sind, das die id eines <form> auf derselben Seite enthalten kann. Dadurch können Sie das <fieldset> zu einem Teil dieses <form> machen, selbst wenn es nicht darin verschachtelt ist. Mit dem Attribut disabled können Sie das <fieldset> und alle seine Inhalte auf einmal deaktivieren.

Dieses Element umfasst die globalen Attribute.

disabled

Wenn dieses boolesche Attribut gesetzt ist, sind alle Formularsteuerelemente, die Nachkommen des <fieldset> sind, deaktiviert, was bedeutet, dass sie nicht bearbeitbar sind und nicht zusammen mit dem <form> übermittelt werden. Sie werden keine Browsing-Ereignisse wie Mausklicks oder fokussierte Ereignisse empfangen. 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, selbst wenn es nicht innerhalb des Formulars ist. Bitte beachten Sie, dass die Verwendung verwirrend ist — wenn Sie möchten, dass die <input>-Elemente innerhalb des <fieldset> mit dem Formular verknüpft werden, müssen Sie das form-Attribut direkt auf diesen Elementen verwenden. Sie können überprüfen, welche Elemente mit einem Formular über JavaScript verknüpft sind, indem Sie HTMLFormElement.elements verwenden.

name

Der Name, der der Gruppe zugeordnet ist.

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

Es gibt mehrere spezielle Stilü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 gestaltet ist, wird es sich wie inline-block verhalten, andernfalls wird es sich wie block verhalten. Standardmäßig gibt es einen 2px-groove-Rand, der den Inhalt umgibt, 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-Rand platziert. Das <legend> passt sich zusammen und etabliert auch einen Formatierungskontext. Der display-Wert wird blockifiziert. (Zum Beispiel verhält sich display: inline wie block.)

Es wird eine anonyme Box geben, die die Inhalte des <fieldset> hält, die bestimmte Eigenschaften vom <fieldset> erbt. Wenn das <fieldset> mit display: grid oder display: inline-grid gestaltet ist, dann wird die anonyme Box ein Raster-Formatierungskontext sein. Wenn das <fieldset> mit display: flex oder display: inline-flex gestaltet ist, dann wird die anonyme Box ein flexibler Formatierungskontext sein. Andernfalls etabliert es einen Block-Formatierungskontext.

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

Dieses Beispiel enthält ein <fieldset> mit einem <legend> und 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 durch das deaktivierte <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