<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 Beschriftung für das <fieldset> bereitstellt. Es hat nur wenige Attribute, von denen die bemerkenswertesten form sind, welches die id eines <form> auf derselben Seite enthalten kann, um das <fieldset> Teil dieses <form>s zu machen, auch wenn es nicht darin verschachtelt ist, und disabled, welches es ermöglicht, das <fieldset> und seinen gesamten Inhalt in einem Schritt zu deaktivieren.

Dieses Element enthält die globalen Attribute.

disabled

Wenn dieses boolesche Attribut gesetzt ist, sind alle Formular-Steuerelemente, die Nachkommen des <fieldset> sind, deaktiviert, was bedeutet, dass sie nicht bearbeitet werden können und nicht zusammen mit dem <form> gesendet werden. Sie empfangen keine Browser-Ereignisse, wie Mausklicks oder Fokus-bezogene Ereignisse. In der Standardeinstellung zeigen Browser solche Steuerelemente ausgegraut an. Beachten Sie, dass Formular-Elemente innerhalb des <legend>-Elements nicht deaktiviert werden.

form

Dieses Attribut nimmt den Wert des id-Attributs eines <form>-Elements an, von dem Sie möchten, dass das <fieldset> Teil ist, auch wenn es sich nicht innerhalb des Formulars befindet. Bitte 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 und HTMLFormElement.elements abfragen.

name

Der Name, der mit der Gruppe verbunden ist.

Hinweis: Die Beschriftung für das Feldset wird durch das erste <legend>-Element gegeben, das darin verschachtelt ist.

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 Inline-Level-display-Wert gestylt wird, verhält es sich wie inline-block, andernfalls wie block. Standardmäßig gibt es einen 2px breiten groove-Rahmen um den Inhalt und eine kleine Menge Standard-Polsterung. 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 entsprechend seinem Inhalt verkleinert und etabliert ebenfalls einen Formatierungskontext. Der display-Wert wird blockiert. (Zum Beispiel verhält sich display: inline als 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 wird, dann wird die anonyme Box ein Grid-Formatierungskontext sein. Wenn das <fieldset> mit display: flex oder display: inline-flex gestylt wird, dann wird die anonyme Box ein Flex-Formatierungskontext sein. Andernfalls etabliert es einen Blockformatierungskontext.

Sie können das <fieldset> und <legend> nach Belieben stylen, um das Design Ihrer Seite zu unterstützen.

Dieses Beispiel zeigt ein sehr einfaches <fieldset>-Beispiel 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 deaktiviert sind, da 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