Stil mit {stil}

Apr 2009

HTML-Tag fieldset – Felder eines Formulars zusammenfassen

Das <fieldset>-Tag gruppiert zusammengehörige Felder eines Formular mit einem Rahmen und einer Überschrift – der »Legende« oder Kurzbeschreibung – die durch das legend-Tag erzeugt für jedes fieldset erzeugt werden kann.

Die Darstellung der fieldset-Box kann über CSS-Eigenschaften verändert werden. Die CSS-Eigenschaft border ändert den Rahmen, den das fieldset-Tag automatisch zeigt, die Eigenschaft background ändert die Hintergrundfarbe der Box.

Das HTML-Tag legend setzt eine Legende zu einem Formularelement innerhalb einer fieldset-Gruppe. Das Tag kann also nur innerhalb eines fieldset-Elements stehen.

fieldset ohne / mit legend-Tag

Am Rande: Wenn keine CSS-Regel den »natürlichen« Rahmen des fieldset-Elements verändert, zeigt Internet Explorer 7 einen feinen hellgrauen Rahmen mit abgerundeten Ecken und der Text des legend-Elements ist per Vorgabe blau.

fieldset und legend transportieren keine Informationen zur bearbeitenden Anwendung, sondern dienen nur der Auszeichnung bzw. der Barrierefreiheit.

<form action="" method="post">
   <fieldset style="width: 70%; border: 4px solid cornflowerblue; background: lavender;">
      <label for="vorname">Vorname </label>
      <input id="vorname" type="text" name="vorname" size="30" value=" Name" />
      <label for="name">Name </label>
      <input id="name" type="text" name="nachname" size="30" value=" Vorname" />
   </fieldset>
</form>

<form action="" method="post">
   <fieldset style="width: 70%">
      <legend> Anmeldung </legend>
      <label for="vorname" >Vorname </label>
      <input id="vorname" type="text" name="vorname" size="30" value=" Name" />
      <label for="name">Name </label>
      <input id="name" type="text" name="nachname" size="30" value=" Vorname" />
   </fieldset>
</form>

Attribute und Ereignisse für fieldset / legend

Zum Seitenanfang