Formulardaten verschicken

Das Formular aus der letzten Lektion sieht fertig aus. Es würde trotzdem nichts ausrichten, denn drei Angaben fehlen noch: wohin die Daten gehen, auf welchem Weg, und unter welchem Namen jeder Wert ankommt.

01 / 03action und method

<form action="/kontakt-empfangen" method="post">
  <label for="name">Dein Name</label>
  <input type="text" id="name" name="name">

  <label for="nachricht">Deine Nachricht</label>
  <input type="text" id="nachricht" name="nachricht">

  <button type="submit">Absenden</button>
</form>

action ist die Adresse, an die der Browser die Daten schickt. Ein Pfad wie hier, nach denselben Regeln wie bei Links. Fehlt action, schickt der Browser an die aktuelle Seite zurück.

method ist der Weg, und es gibt zwei:

GET hängt die Werte an die Adresse an, hinter ein Fragezeichen. Aus einer Suche nach „Linsen“ wird /suche?q=Linsen. Das ist sichtbar, kopierbar, als Lesezeichen speicherbar und landet im Browserverlauf. Genau richtig für Suche, Filter und Sortierung, also überall dort, wo ein Ergebnis teilbar sein soll.

POST schickt die Werte im Rumpf der Anfrage mit, unsichtbar in der Adresszeile. Nichts landet im Verlauf, nichts lässt sich versehentlich weitergeben. Richtig für alles, was etwas verändert oder privat ist: Anmeldung, Bestellung, Kontaktnachricht, Passwortänderung.

Eine Faustregel, die fast immer trägt: Ändert das Abschicken etwas auf dem Server, nimm POST. Fragt es nur etwas ab, nimm GET.

Ein Hinweis zur Sicherheit, der oft falsch verstanden wird: POST ist nicht verschlüsselt. Es ist nur nicht in der Adresszeile sichtbar. Verschlüsselung kommt von HTTPS, und die brauchst du in beiden Fällen.

02 / 03name ist der Schlüssel

<form action="/kontakt-empfangen" method="post">
  <label for="name">Dein Name</label>
  <input type="text" id="name">

  <button type="submit">Absenden</button>
</form>

Hier fehlt am input das name-Attribut. Optisch ändert das nichts, das Formular sieht vollständig aus, der Knopf reagiert, und trotzdem kommt beim Server nichts an. Nicht ein leerer Wert, sondern überhaupt kein Eintrag.

Der Grund: Der Browser packt die Daten als Paare aus Name und Wert. Ohne Namen gibt es kein Paar, und das Feld wird beim Absenden schlicht übersprungen.

Das ist der häufigste Fehler bei selbstgebauten Formularen, und er ist besonders zäh, weil auf der Seite nichts darauf hindeutet. Kein Fehler im Browser, keine rote Meldung, nur ein Formular, das scheinbar geht und leer ankommt. Eine Stelle sagt es trotzdem, und die kommt am Ende dieser Lektion.

Verwechsle name nicht mit id. Die id ist für die Seite: Sie verbindet das label mit dem Feld und dient JavaScript und CSS als Anker. Der name ist für den Server: Er ist der Schlüssel, unter dem der Wert ankommt. Dass beide oft gleich heißen, ist Bequemlichkeit, keine Regel.

Bei Textfeldern ist der Wert das, was der Nutzer tippt. Bei Checkboxen, Radios und Auswahllisten legst du ihn selbst über value fest, das kommt in den nächsten Lektionen.

03 / 03GET in der Praxis

<form action="/suche" method="get">
  <label for="q">Rezept suchen</label>
  <input type="search" id="q" name="q">

  <button type="submit">Suchen</button>
</form>

Ein Suchformular ist der Musterfall für GET. Der name ist hier kurz q, und deshalb sehen Such-URLs im ganzen Web ähnlich aus: ?q= und dahinter der Suchbegriff.

Was du daran gut sehen kannst: Die Namen der Felder werden Teil der öffentlichen Adresse. Sie sollten also kurz und sprechend sein, und sie sind nichts Geheimes.

Probier es aus: Tipp einen Suchbegriff ins Feld und klick auf Suchen. In der Adresszeile steht danach /suche?q= und dahinter dein Begriff. Genau das passiert auch auf einer echten Seite, nur dass dort ein Server antwortet. Hier kommt stattdessen die Meldung, dass es die Seite /suche nicht gibt, und das ist richtig: du hast eine Adresse gebaut, aber keine Seite dahinter.

Und jetzt der Vergleich: Öffne noch einmal das erste Beispiel und schick dessen Formular ab. In der Adresszeile steht dann nur /kontakt-empfangen, kein Fragezeichen, kein Name, keine Nachricht. Die Werte sind trotzdem unterwegs, nur eben im Rumpf der Anfrage.

Den kannst du dir ansehen: Im Reiter „Netzwerk“ steht die Anfrage als POST, und ein Klick darauf klappt sie auf. Unter „Anfrage-Rumpf“ stehen deine Werte, in derselben Schreibweise, die bei GET in der Adresse steht. Das ist der Unterschied zwischen GET und POST, zum Anfassen: dieselben Daten, ein anderer Umschlag.

Und jetzt dasselbe mit dem mittleren Beispiel, dem ohne name: Tipp etwas ein, schick ab, sieh im Reiter „Netzwerk“ nach. Die Zeile steht da, aber sie lässt sich nicht aufklappen, weil es nichts aufzuklappen gibt. Das ist der Satz von oben zum Anfassen: Es kommt kein leerer Wert an, sondern gar keiner.