HTML-Tag fieldset – Formularfelder zusammenfassen

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