Das form-Element: Der Rahmen für Eingaben
Ein <form> bündelt Eingabefelder zu einem Formular und regelt was beim Absenden passiert. Das Element selbst zeigt nichts an, es ist der organisatorische Rahmen um seine Mitspieler: input, label, textarea, select und button.
Syntax und Beispiel
HTML-Code
<form action="/suche" method="get">
<label for="q">Suchbegriff:</label>
<input type="text" id="q" name="q">
<button>Suchen</button>
</form>action und method: Wohin und wie?
action ist die Adresse an die die Daten geschickt werden, in der Regel ein Skript auf dem Server. method bestimmt den Weg dorthin und kennt zwei Werte:
- get hängt die Eingaben sichtbar an die Adresse an (
/suche?q=html). Gut für Suchen und Filter: Das Ergebnis lässt sich verlinken und als Lesezeichen speichern. - post schickt die Daten unsichtbar im Hintergrund mit. Der richtige Weg für alles was etwas verändert oder vertraulich ist: Bestellungen, Anmeldungen, Passwörter. Passwörter in einer GET-Adresse wären eine mittlere Katastrofe, die landen sonst in Verläufen und Server-Logs.
Das unterschätzte name-Attribut
Beim Absenden überträgt der Browser für jedes Feld ein Paar aus Name und Wert. Der Name kommt aus dem name-Attribut des Felds. Ein Feld ohne name wird schlicht nicht mitgeschickt, das ist der Klassiker wenn auf dem Server "nichts ankommt". Nicht mit der id verwechseln: die id ist für Beschriftungen und CSS zuständig, der name für die Datenübertragung. Meist vergibt man beide, gern identisch.
Eingebaute Prüfung
Moderne Formularfelder können sich selbst prüfen: required erzwingt eine Eingabe, Typen wie email prüfen das Format. Der Browser blockiert das Absenden und zeigt eine Meldung, ganz ohne JavaScript. Details dazu stehen beim input-Element. Wichtig fürs Gesamtbild: Diese Prüfung ist Komfort für den Nutzer, kein Schutz. Auf dem Server muss trotzdem alles nochmal geprüft werden, denn ein Formular lässt sich mit wenig Aufwand umgehn.
Typische Fehler
- Formulare ineinander verschachteln. Ein form im form ist ungültig.
- Felder ohne name-Attribut, siehe oben.
- method="get" für sensible Daten.
- Den Absende-Button vergessen oder als reines JavaScript-Konstrukt bauen. Ein simples <button> im Formular sendet von Haus aus ab.