HTML-Tag fieldset – Formularfelder zusammenfassen

Gruppieren und zusammenhalten

fieldset und legend lockern lange Formulare auf und halten Gruppen von Formularfeldern optisch zusammen. Der Darstellung sieht man das hohe Alter an, aber für die Darstellung ist CSS zuständig.

legend setzt eine Legende zu einem Formularelement innerhalb einer fieldset-Gruppe. Das legend-Element 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>

fieldset – disabled

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

HTML 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 (in IE11 sind die Eingabefelder trotz disabled aktiv – Hoffnungslos).

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>

onchange ist ein valides HTML-Attribut, das ein Javascript bei einer Änderung auslöst. Eigentlich sind Attribute wie onclick, onchange, onmouseover im HTML-Markup heute überholt. Mal 'ne Ausnahme …

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.