<fieldset> HTML-Feldsatz-Element

Probieren Sie es aus

<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 fr einen Teil eines HTML-Formulars, wobei ein verschachteltes <legend>-Element eine Beschriftung fr das <fieldset> angibt. Es verfgt ber wenige Attribute, von denen die bemerkenswertesten form sind, das die id eines <form> auf derselben Seite enthalten kann, sodass das <fieldset> Teil dieses <form> sein kann, auch wenn es nicht darin verschachtelt ist, und disabled, das es Ihnen ermglicht, das <fieldset> und seinen gesamten Inhalt auf einmal zu deaktivieren.

Attribute

Dieses Element beinhaltet die globalen Attribute.

disabled

Wenn dieses boolesche Attribut gesetzt ist, sind alle Formularsteuerelemente, die Nachkommen des <fieldset> sind, deaktiviert, d.h. sie sind nicht bearbeitbar und werden nicht zusammen mit dem <form> bermittelt. Sie erhalten keine Browsereignisse, wie Mausklicks oder fokusbezogene Ereignisse. Standardmig werden solche Steuerelemente von Browsern ausgegraut dargestellt. 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 mchten, auch wenn es nicht innerhalb des Formulars ist. Beachten Sie bitte, dass die Verwendung verwirrend ist wenn Sie mchten, dass die <input>-Elemente innerhalb des <fieldset> mit dem Formular verknpft sind, mssen Sie das form-Attribut direkt an diesen Elementen verwenden. Sie knnen berprfen, welche Elemente einem Formular zugeordnet sind, indem Sie JavaScript verwenden und HTMLFormElement.elements nutzen.

name

Der Name, der der Gruppe zugeordnet ist.

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

Gestaltung mit CSS

Fr <fieldset> gibt es mehrere spezielle gestalterische berlegungen.

Sein display-Wert ist standardmig block, und es etabliert einen block formatting context. Wenn das <fieldset> mit einem inline-level display-Wert gestaltet wird, verhlt es sich als inline-block, andernfalls verhlt es sich als block. Standardmig gibt es eine 2px groove-Rahmen, der den Inhalt umgibt, und eine geringe Menge an Standardabstand. Das Element besitzt standardmig min-inline-size: min-content.

Wenn ein <legend> vorhanden ist, wird es ber der block-start-Rahmen platziert. Das <legend> passt sich der Gre an und etabliert ebenfalls einen Formatierungskontext. Der display-Wert wird blockiert. (Zum Beispiel verhlt sich display: inline als block.)

Es wird ein anonymes Box-Element geben, das den Inhalt des <fieldset> hlt, welches bestimmte Eigenschaften vom <fieldset> erbt. Wenn das <fieldset> mit display: grid oder display: inline-grid gestaltet wird, ist das anonyme Box-Element ein Grid-Formatierungskontext. Wenn das <fieldset> mit display: flex oder display: inline-flex gestaltet wird, ist das anonyme Box-Element ein Flex-Formatierungskontext. Andernfalls etabliert es einen Block-Formatierungskontext.

Sie knnen das <fieldset> und <legend> nach Belieben gestalten, um Ihrem Seitendesign zu entsprechen.

Beispiele

Einfaches Fieldset

Dieses Beispiel beinhaltet 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

Deaktiviertes Fieldset

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Das <legend>-Element
• Das <input>-Element
• Das <label>-Element
• Das <form>-Element