CSS, HTML UND JAVASCRIPT MIT {STIL}

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

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]-->

Attribute und Ereignisse für fieldset und legend

Kernattribute	Events
class, dir, id, lang, style, title	onclick, ondblclick onkeydown, onkeyup mousedown, mousemove, mouseout, mousedown, mouseup