Tag <fieldset>

Tag <fieldset>

Definition

Status: Aktueller Standard

Das Tag <fieldset> steht für fenced frame (umzäunter Rahmen).

Das <fieldset>-Element dient dazu, mehrere zusammengehörige Formular-Elemente (wie <input>, <select> oder <label>) innerhalb eines <form>-Tags logisch und visuell zu gruppieren. Es schafft Ordnung in komplexen Formularen und verbessert die Benutzerführung. Zusammen mit dem <legend>-Element, das als Überschrift für die Gruppe dient, ist es das Standard-Werkzeug für strukturierte Formulare. Wenn ein Nutzer durch die Eingabefelder tabbt, liest ein Screenreader bei jedem Feld innerhalb des Fieldsets zuerst den Inhalt der vor. So weiß der Nutzer immer, in welchem Abschnitt (z.B. „Rechnungsadresse“ vs. „Lieferadresse“) er sich befindet. .

Syntax

<fieldset>...</fieldset>

Attribute bzw. Unterelemente

disabled

Alle Elemente innerhalb <fieldset> werden deaktiviert!

form

Ermöglicht es, das Fieldset einem Formular zuzuordnen außerhalb des <form>-Tags (über die ID des Formulars)

name

Ein Name für die Gruppe, der über JavaScript zugänglich ist.

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <fieldset> - ---

Der Code:

<h3>Ohne Fieldset (es fehlt die Einrahmung)</h3>
    <form>
      <legend>Persönliche Daten</legend>
      <label> Name:
        <input type="text" name="name">
      </label>
      <label> E-Mail:
        <input type="email" name="email">
      </label>
    </form>

    <h3>Mit Fieldset (optischer Rahmen)</h3>
    <form>
      <fieldset>
        <legend>Persönliche Daten</legend>
        <label> Name:
          <input type="text" name="name">
        </label>
        <label> E-Mail:
          <input type="email" name="email">
        </label>
      </fieldset>
    </form>

Ergebnis:

Ergebnis: <fieldset>-Demo 1
---

CSS-Tipps:

<fieldset> lässt sich mit den üblichen "border"-Definitionen gestalten:

fieldset {
  border: 2px solid #007BFF;
  border-radius: 8px;
  padding: 1em;
  box-shadow: 5px 5px 15px 5px #000000;
  background: #000;
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

legend {
  border: 1px solid #007BFF;
  border-radius: 8px;
  padding: 3px;
  font-size: 14px;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.6);
}

Ergebnis:

Ergebnis: <fieldset>-Demo 1
---