<fieldset> und <legend>: gruppieren von Steuerelemente in Webfomular

Übersicht hilft, um schnell ein Formular auszufüllen. Daher ist das Gruppieren von zusammengehörigen Feldern in Webformularen sehr hilfreich.

Dazu steht uns als HTML-Befehl <fieldset> und <legend> zur Verfügung.

Vorab unser Beispiel in HTML:

<form action="test.php" method="post">
  <fieldset>
    <legend>Anrede</legend>

    <label for="maennlich">Herr</label>
    <input type="radio" name="anrede" id="maennlich" value="m">

    <label for="weiblich">Frau</label>
    <input type="radio" name="anrede" id="weiblich" value="w">

  </fieldset>
</form>

Durch <fieldset> werden alle Elemente umschlossen, die zu einer Gruppierung gehören. In unserem obigen Beispiel sind es die 2 Anreden für Herr und Frau.

legend steht als Überschrift innerhalb der Umrandung, die durch fieldset optisch entsteht.

Die meisten Browser verwenden folgende Einstellungen als Standardwerte zur Anzeige von fieldset:

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove silver;
}

und

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

Diese können wir nun nach Belieben über CSS verändern.