HTML-Tag fieldset – Formularfelder zusammenfassen

Gruppieren und zusammenhalten

Der Darstellung sieht man das hohe Alter dieser HTML-Elemente an, aber für die Darstellung ist CSS zuständig. Für Screenreader sind fieldset und legend fundamental. legend wird als Gruppenüberschrift vorgelesen und macht Radio- und Checkbox-Gruppen besser verständlich.

<form class="myform">
	<fieldset class="form-group">
		<legend>Persönliche Daten</legend>

		<label>
			Vorname
			<input type="text" name="given-name" autocomplete="given-name">
		</label>

		<label>
			Nachname
			<input type="text" name="family-name" autocomplete="family-name">
		</label>
	</fieldset>

	<fieldset class="form-group">
		<legend>Kontakt</legend>

		<label>
			E-Mail
			<input type="email" name="email" autocomplete="email">
		</label>

		<label>
			Telefon
			<input type="tel" name="tel" autocomplete="tel">
		</label>
	</fieldset>

	<button type="submit">Absenden</button>
</form>

Den Rahmenlinien von fieldset und legend sieht man das hohe Alter an, aber schon eine kleine Portion CSS modernisiert die Darstellung. Auf keinen Fall sollten sie Elementen wie h2, h3 und divs weichen, die zwar die Optik auf Hochglanz bringen, aber die Barrierefreiheit (Accessibility) außer Acht lassen. So könnte das Formular mit fieldset und legend mit etwas CSS aussehen:

fieldset und legend für Radio- und Checkboxen nutzen

Für den Benutzer mit dem Bildschirm ist der Zusammenhang schon durch die Darstellung schnell klar: Hier ist eine von vier Optionen gefragt. Mit dem Screenreader ist die Struktur nicht ohne Weiteres ersichtlich: das gleich lautende name-Attribut verbindet die vier Felder.

Die Überschrift im legend-Element beendet das Ratespiel.

<fieldset>
	<legend>Bevorzugte Kontaktart</legend>
	<label><input type="radio" name="contact" value="mail"> E-Mail</label>
	<label><input type="radio" name="contact" value="phone"> Telefon</label>
	<label><input type="radio" name="contact" value="anschreiben"> Anschreiben</label>
	<label><input type="radio" name="contact" value="besuch"> Persönlicher Besuch</label>
</fieldset>

fieldset – disabled

In älteren Versionen des HTML-Standards transportierte fieldset keine Informationen, sondern diente nur als optische Hilfestellung.

fieldset kommt heute mehr Bedeutung zu 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 perfekt. Ausgerechnet Safari hat unvorhersehbare Schwachstellen: Mal funktioniert's, mal nicht.

Kann man vorsichtshalber mit CSS unterstützen:

fieldset[disabled] {
	opacity: 0.6;
}

fieldset[disabled] * {
	/** Bringt Safari auf die Spur **/
	pointer-events: none;
}

Die Betonung liegt auf »unterstützen« – nicht ersetzen –, denn Tastatureingaben werden unterbunden und Screenreader verstehen disabled.

Checkbox aktivieren, um Eingabefelder freizugeben:

<fieldset disabled id="anmeldung" >
	<legend>
		<label>
			<input type="checkbox" onchange="document.querySelector('#anmeldung').disabled=false">
		</label> 
		Anmeldung
	</legend>
	<label><input type="text" id="username" placeholder="User-Name" style="width:90%"></label>
	<label><input type="password" id="userpasswd" placeholder="Passwort" style="width:90%"></label>
</fieldset>

Ganz vorsichtig und für alle Fälle kann man das disabled mit JavaScript unterstützen.

fieldset.querySelectorAll("input, select, textarea, button")
	.forEach(el => el.disabled = true);

fieldset verschachteln

Die Eingabefelder der inneren fieldset-Elemente in diesem Beispiel sind inaktiv, da das umgebende fieldset-Element disabled setzt. Erst wenn die Checkbox Klubkarte aktiviert ist, wird das Feld "Name der Karte" für die Eingabe freigegeben.

<form>
	<fieldset name="clubfields" disabled>
		<legend>
			<label><input type="checkbox" name="club" onchange="form.clubfields.disabled = !checked"> Klubkarte </label>
		</legend> 
		<p><label>Name auf der Karte:  <input name="clubname" required></label></p>
		<fieldset name="numfields" disabled>
			<legend> 
				<label> 
					<input type="radio" name="clubtype" onchange="form.numfields.disabled = !checked">
					Karte zeigt Ziffern </label>
			</legend> 
			<p><label>Kartennummer: <input name="clubnum" required pattern="[-0-9]+"></label></p>
		</fieldset>
		<fieldset name="letfields" disabled>
			<legend> 
				<label> 
					<input type="radio" name="clubtype" onchange="form.letfields.disabled = !checked">
					Karte zeigt Buchstaben </label>
			</legend> 
			<p><label>Code der Karte: <input name="clublet" required pattern="[A-Za-z]+"></label></p>
		</fieldset>
	</fieldset>
</form>

Quelle: HTML Living Standard

CSS für fieldset und legend

CSS border ändert den Rahmen, den fieldset automatisch zeigt; CSS background-color ändert die Hintergrundfarbe der Box.

fieldset { 
	border: 2px solid #C5D8E1; 
	border-radius: 6px; 
	background: white; 
} 

fieldset Attribute

disabled

eine Gruppe von Formularelementen innerhalb von fieldset ist inaktiv

form

formid, Formulare, zu denen das fieldset gehört. Mit einem form-Attribut kann ein fieldset, das nicht innerhalb eines form-Elements liegt, einem oder mehreren Formularen zugeordnet werden.

name

Text, Name des fieldsets, kann als Referenz der Formulardaten in Javascript oder nach dem Absenden in der Anwendung genutzt werden.