LU07d - Fieldset, Legend

siehe auch selfhtml - Gliederung

Das <fieldset>-Element wird verwendet, um Elemente innerhalb von Formularen zu gruppieren. Mithilfe des <legend>-Elements kann eine Überschrift für das <fieldset>-Element definiert werden.

Das <fieldset>-Element kann unter HTML5 folgende Attribute haben:

• disabled: Mit dem Attributswert disabled kann das <fieldset> ausgegraut und nicht auswählbar angezeigt werden.
• form: Mit dem Attributswert, der der ID eines Formulars entspricht, kann das <fieldset> diesem Formular zugeordnet werden.
• name: Durch den Namen kann das <fieldset> in einem verarbeitenden Skript ausgewertet werden.

<form id="gewinnen">
  <fieldset>
    <label for="vorname">Vorname:
      <input name="vorname" id="vorname" placeholder="Max">
    </label>
    <label for="zuname">Zuname:
      <input name="zuname" id="zuname" placeholder="Mustermann">
  </fieldset>
  <fieldset>
    <label for="männl">
      <input type="radio" name="geschlecht" id="männl" value="männl">männlich</label>
    <label for="weibl">
      <input type="radio" name="geschlecht" id="weibl" value="weibl">weiblich</label>
  </fieldset>
</form>

Das <legend>-Element in einem HTML-Formular wird verwendet, um eine Überschrift oder einen Titel für das dazugehörige <fieldset>-Element zu definieren. Es dient dazu, den Zweck oder die Gruppierung der Formularelemente innerhalb des <fieldset>-Elements zu beschreiben.

Die Verwendung des <legend>-Elements bietet mehrere Vorteile:

• Klarheit und Struktur: Durch das Hinzufügen einer aussagekräftigen Überschrift mit <legend> wird die Gruppierung von Formularelementen in einem <fieldset> deutlicher und benutzerfreundlicher. Es hilft den Benutzern, den Inhalt des Formulars besser zu verstehen.
• Barrierefreiheit: Für Benutzer mit assistiven Technologien wie Screenreadern liefert das <legend>-Element wichtige Kontextinformationen. Die Überschrift ermöglicht eine bessere Navigation und Verständnis des Formulars für Benutzer mit Sehbehinderungen.

<form id="gewinnen">
  <fieldset>
    <legend>Name</legend>
    <label for="vorname">Vorname:
      <input name="vorname" id="vorname" placeholder="Max">
    </label>
    <label for="zuname">Zuname:
      <input name="zuname" id="zuname" placeholder="Mustermann"></fieldset>
  <fieldset>
    <legend>Geschlecht</legend>
    <label for="männl">
      <input type="radio" name="geschlecht" id="männl" value="männl">männlich</label>
    <label for="weibl">
      <input type="radio" name="geschlecht" id="weibl" value="weibl">weiblich</label>
  </fieldset>
</form>

Kevin Maurizi, Marcel Suter