Gruppieren und zusammenhalten
fieldset und legend lockern lange Formulare auf und halten Gruppen von Formularfeldern optisch zusammen.
legend setzt eine Legende zu einem Formularelement innerhalb einer fieldset-Gruppe. Ein legend-Tag kann nur innerhalb von fieldset stehen.
<fieldset style="text-align:center">
<legend style="padding:20px;text-align:center">Anmeldung</legend>
<label>
<input type="text" placeholder="Vorname" />
</label>
<label>
<input type="text" placeholder="Name" />
</label>
</fieldset>
HTML5 fieldset
In älteren Versionen des HTML-Standards transportiere fieldset keine Informationen, sondern diente nur als optische Hilfestellung.
In HTML5 hat fieldset mehr Bedeutung bekommen als die optische Gruppierung von Feldern:
fieldset disabled setzt Eingabefelder außer Kraft. Natürlich gilt: trotzdem prüfen, denn disabled funktioniert nicht in jedem Browser (in IE11 sind die Eingabefelder trotz disabled aktiv – Hoffnungslos).
Mit einem form-Attribut kann ein fieldset, das nicht innerhalb eines form-Elements liegt, einem oder mehreren Formularen zugeordnet werden.
CSS für fieldset und legend
Ohne zusätzliches CSS zeigen IE7/IE8 beim fieldset einen feinen hellgrauen Rahmen mit abgerundeten Ecken. Der Text in legend ist per Vorgabe blau.
IE9 hält sich an die Standard-Darstellung und rendert den klassischen eckigen Rahmen.
CSS border ändert den Rahmen, den das fieldset-Tag automatisch zeigt; CSS background ändert die Hintergrundfarbe der Box.
Wer auf 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