CSS, HTML und Javascript mit {stil}

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.

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



Anmeldung


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

<form … >
   <fieldset>
      <label for="vorname">Vorname </label>
      …
   </fieldset>
</form>

<form … >
   <fieldset>
      <legend> Anmeldung </legend>
      <label for="vorname" >Vorname </label>
      …
      </fieldset>
</form>

CSS für fieldset und legend

Wenn keine CSS-Regel den »natürlichen« Rahmen des fieldset-Elements verändert, zeigen IE7/IE8 einen feinen hellgrauen Rahmen mit abgerundeten Ecken und der Text des legend-Elements ist per Vorgabe blau.

IE9 hält sich an die Standard-Darstellung und rendert den klassischen eckigen Rahmen.

Die CSS-Eigenschaft border ändert den Rahmen, den das fieldset-Tag automatisch zeigt, die Eigenschaft background ändert die Hintergrundfarbe der Box.

Wer sich an eine individuellen Gestaltung von fieldset und legend setzt, muss hinnehmen, dass die älteren Version von Internet Explorer bis einschließlich IE 8 nur wenig Spielraum lassen. Einen Ausweg bieten die bedingten Kommentare für IE.

fieldset { border: 2px solid #C5D8E1; 
           border-radius: 6px; 
           background: white; } 
           …
<!--[if lt IE 9]>
<style type="text/css" title="text/css">
fieldset { border: 1px solid silver; padding: 3px; }
</style>
<![endif]-->

fieldset Attribute

disabled (neu in HTML5)
eine Gruppe von Formularelementen ist inaktiv
form (neu in HTML5)
formid, Formulare, zu denen das fieldset gehör
name (neu in HTML5)
Text, Name des fieldsets