Wie definiere ich den Titel eines Formulars im HTML-Code?
- Überschrift über dem Formular
- Verwendung von <fieldset> und <legend> für Gruppierungen
- Titel des Dokuments bzw. des Browser-Tabs
- Fazit
In HTML gibt es keine direkte Eigenschaft oder ein Attribut, das den Titel eines Formulars im Sinne einer Überschrift innerhalb des Formulars festlegt. Stattdessen wird der Titel oder die Überschrift eines Formulars meist durch die Verwendung von HTML-Elementen, wie zum Beispiel Überschriften (<h1>, <h2> bis <h6>) oder einem <legend> Element innerhalb eines Feldsets, dargestellt.
Überschrift über dem Formular
Die einfachste Möglichkeit, einem Formular einen Titel zu geben, besteht darin, über dem <form>-Tag eine Überschrift zu platzieren. Diese Überschrift beschreibt den Zweck des Formulars für den Benutzer. Zum Beispiel kann man ein <h1> oder <h2>-Element verwenden:
<h2>Kontaktformular</h2><form action="/senden" method="post"> ...</form>Diese Überschrift wird optisch über dem Formular angezeigt und gibt dem Benutzer einen klaren Hinweis, worum es bei dem Formular geht.
Verwendung von <fieldset> und <legend> für Gruppierungen
Falls das Formular in verschiedene Bereiche unterteilt ist und man jeder Gruppe einen Titel geben möchte, kann man das <fieldset>-Element zusammen mit dem <legend>-Element benutzen. Das <legend> fungiert als Titel für den Bereich und wird innerhalb des Formulars als Überschrift dargestellt.
<form action="/senden" method="post"> <fieldset> <legend>Persönliche Daten</legend> <label for="name">Name:</label> <input type="text" id="name" name="name"> </fieldset></form>Das <legend>-Element ist besonders nützlich bei längeren Formularen mit verschiedenen Bereichen.
Titel des Dokuments bzw. des Browser-Tabs
Im Gegensatz zu den oben beschriebenen Methoden bezeichnet der <title>-Tag im <head>-Bereich der HTML-Datei den Titel, der im Browser-Tab oder bei Lesezeichen angezeigt wird. Dieser steht aber nicht sichtbar im Formular selbst. Ein Beispiel wäre:
<head> <title>Kontaktformular - Meine Webseite</title></head>Dies ist wichtig für die Suchmaschinenoptimierung und für die Nutzerführung im Browser, betrifft jedoch nicht die Gestaltung des Formularinhalts.
Fazit
Um einem Formular im HTML-Code einen sichtbaren Titel hinzuzufügen, empfiehlt es sich, eine Überschrift direkt vor das Formular zu schreiben oder innerhalb des Formulars <fieldset> mit <legend> zu verwenden. Der <title>-Tag im <head> definiert den Titel der Seite und nicht des Formulars.