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