Wie integriere ich einen Formular-Titel und eine Beschreibung in ein bestehendes Formular ohne Layout zu zerstören?
Kontaktformular
Bitte füllen Sie das folgende Formular aus, um mit uns in Kontakt zu treten. Wir melden uns so schnell wie möglich bei Ihnen.
In diesem Beispiel wird der Formular-Titel als Überschrift `h2` direkt am Anfang des Formulars eingefügt. Dadurch wird der Titel klar erkennbar und semantisch sinnvoll positioniert. Die Beschreibung folgt als Absatz `p` unmittelbar darunter und erläutert kurz den Zweck oder die Anleitung zum Formular. Beide Elemente haben eindeutige `id`-Attribute, die im `form`-Tag mittels `aria-labelledby` und `aria-describedby` referenziert werden. Dies verbessert die Zugänglichkeit, sodass Screenreader den Titel und die Beschreibung korrekt ankündigen.
Das Styling sorgt dafür, dass der Titel und die Beschreibung optisch gut vom eigentlichen Formularinhalt getrennt sind, ohne das vorhandene Layout zu stören. Die Margins werden so gesetzt, dass kein unerwünschter Abstand oder Überlappung entsteht.
Wenn das bestehende Formular bereits eigene Stile oder Layoutregeln nutzt, empfiehlt es sich, die neuen Klassen (`form-title`, `form-description`) ggf. mit spezifischen, nicht kollidierenden Namen zu versehen oder die Styles entsprechend moderat zu halten. Wichtig ist, dass der Titel und die Beschreibung vor den Eingabefeldern eingefügt werden, um eine logische und visuelle Struktur zu bewahren.