HTML-Tag fieldset – Felder eines Formulars zusammenfassen

HTML fieldset – Felder trennenxVornameNachnameBenutzernamePasswortPasswort bestätigenEmailadresseNicht öffentlichöffentlich angezeigtNicht öffentlich

fieldset gruppiert zusammengehörige Felder eines Formulars mit einem Rahmen und einer Überschrift – der »Legende« oder Kurzbeschreibung. Legend kann für jedes fieldset erzeugt werden.

Sowohl fieldset als auch legend sieht man das hohe Alter an, aber dafür ist dann CSS zuständig.

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 eines fieldset-Elements stehen.

Anmeldung

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

<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 HTML5 hat fieldset mehr Bedeutung bekommen als die optische Gruppierung von Feldern:

fieldset disabled setzt Eingabefelder außer Kraft.

Anmeldung

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

Mehr zu HTML-Formularen und Eingabefeldern