Wie fügt man Abschnitte in ein Formular ein?

1. Einführung
2. Der Einsatz des <fieldset>-Elements
3. Die Funktion des <legend>-Elements
4. Beispiel für einen Formularabschnitt
5. Weitere Gestaltungsoptionen
6. Fazit

Einführung

In HTML-Formularen ist es oft hilfreich, die Eingabefelder übersichtlich und strukturiert anzuordnen, besonders bei längeren Formularen. Abschnitte helfen dabei, verwandte Eingabefelder logisch zusammenzufassen und das Formular für den Benutzer klarer und verständlicher zu gestalten. Es gibt mehrere Möglichkeiten, Abschnitte in Formulare einzufügen, die sowohl die Lesbarkeit des Codes als auch die Benutzerfreundlichkeit verbessern.

Der Einsatz des <fieldset>-Elements

Das wichtigste und meistverwendete Element zur Gruppierung von Formularabschnitten ist das <fieldset>-Element. Es dient dazu, zusammengehörige Eingabefelder gemeinsam einzuschließen. Innerhalb eines <fieldset> können verschiedene Eingabefelder wie Textfelder, Auswahlfelder oder Checkboxen gruppiert werden. Das <fieldset> erzeugt zudem standardmäßig einen Rahmen um die Gruppe, was die visuelle Trennung unterstützt.

Die Funktion des <legend>-Elements

Zusätzlich zu <fieldset> wird häufig auch das <legend>-Element verwendet. Dieses Element dient als Überschrift für den jeweiligen Abschnitt. Es wird innerhalb des <fieldset> als erstes Element angegeben und beschreibt den Inhalt oder Zweck der Gruppe an Formularfeldern. Die Kombination aus <fieldset> und <legend> macht das Formular nicht nur optisch übersichtlicher, sondern verbessert auch die Zugänglichkeit für Benutzer von Screenreadern.

Beispiel für einen Formularabschnitt

Hier ein einfaches Beispiel, wie man einen Abschnitt mit den persönlichen Daten in einem Formular einfügen kann:

<form action="/submit" method="post"> <fieldset> <legend>Persönliche Daten</legend> <label for="name">Name:</label> <input type="text" id="name" name="name" required><br> <label for="email">E-Mail:</label> <input type="email" id="email" name="email" required> </fieldset></form>

In diesem Beispiel umschließt das <fieldset> die Eingabefelder für Name und E-Mail. Die Überschrift "Persönliche Daten" wird durch das <legend> angegeben.

Weitere Gestaltungsoptionen

Sie können das Erscheinungsbild von <fieldset> und <legend> mittels CSS individuell anpassen, um das Design an Ihre Webseite anzupassen. Außerdem lassen sich innerhalb eines <fieldset> beliebig viele Eingabefelder und andere HTML-Elemente platzieren, sodass komplexe und gut strukturierte Formulare möglich sind.

Fazit

Abschnitte in Formularen ermöglichen eine bessere Übersichtlichkeit und Benutzerführung. Die Kombination von <fieldset> zum Gruppieren und <legend> zur Benennung sind dafür die semantisch korrekte und bewährte Methode. Durch diese Kennzeichnung wird nicht nur die optische Struktur verbessert, sondern das Formular wird auch barrierefrei und benutzerfreundlich gestaltet.