Links vs. Formulare bei HTTP-Anfragen
Jedes Mal, wenn ein Benutzer auf einen Navigationslink klickt oder eine Suchanfrage absendet, führt der Browser eine HTTP-Anfrage aus. Doch welches HTML-Element diese Anfrage auslöst – und wie – ist wichtiger, als den meisten Entwicklern bewusst ist. Die Wahl zwischen <a> und <form> ist nicht nur eine Markup-Präferenz. Es ist eine semantische Entscheidung, die Verhalten, Sicherheit und Korrektheit beeinflusst.
Wichtigste Erkenntnisse
- Links (
<a>) dienen der Navigation und lösen typischerweise GET-Anfragen aus. Formulare (<form>) dienen der Datenübermittlung und unterstützen sowohl GET als auch POST. - Verwenden Sie GET-Formulare, wenn Benutzereingaben die URL formen (wie Suchanfragen), und POST-Formulare, wenn die Aktion den Serverzustand verändert (wie Kontoerstellung).
method="link"ist ungültiges HTML – Browser fallen stillschweigend auf GET zurück, was zu unerwartetem Verhalten führen kann.- HTML-Formulare unterstützen nativ nur GET und POST. Für PUT, PATCH oder DELETE verwenden Sie JavaScript.
Der grundlegende Unterschied: HTML-Navigation vs. Übermittlung
Links (<a>) sind Navigationselemente. Sie teilen dem Browser mit: „Hole diese Ressource.” Ein Klick auf einen Link löst typischerweise eine GET-Navigationsanfrage an die URL im href-Attribut aus. Das war’s. Es werden keine Benutzereingaben gesammelt, keine Daten serialisiert – nur ein sauberes Navigationsereignis.
Formulare (<form>) sind Datenübermittlungselemente. Sie sammeln Eingaben vom Benutzer und senden sie an einen Server. Ein Formular kann je nach Art der Anfrage entweder GET oder POST verwenden.
Hier ist ein schneller Vergleich:
| Merkmal | <a> Link | <form> |
|---|---|---|
| Zweck | Navigation | Datenübermittlung |
| HTTP-Methode | Nur GET | GET oder POST |
| Sammelt Benutzereingaben | Nein | Ja |
| Rechtsklick / in neuem Tab öffnen | Ja | Nein |
| SEO-crawlbar | Ja | Eingeschränkt |
| Ändert Serverzustand | Nein | Ja (mit POST) |
GET vs. POST in HTML-Formularen: Wann welche Methode anzuwenden ist
Verwenden Sie einen Link für sichere, idempotente Navigation
Wenn die Aktion nichts auf dem Server ändert und das Ziel als Lesezeichen gespeichert oder geteilt werden kann, verwenden Sie einen Link:
<a href="/articles/html-basics">Lesen Sie den HTML-Leitfaden</a>Links sind sicher, idempotent und cachebar – genau das, was GET-Anfragen sein sollten.
Verwenden Sie ein GET-Formular, wenn Benutzereingaben die URL formen
Ein Suchfeld ist das klassische Beispiel. Der Benutzer gibt eine Anfrage ein, und das Formular hängt sie als Query-String an die URL an:
<form method="get" action="/search">
<input type="search" name="q" placeholder="Suchen...">
<button type="submit">Suchen</button>
</form>Dies erzeugt /search?q=ihre+anfrage – eine teilbare, als Lesezeichen speicherbare URL. Verwenden Sie GET-Formulare, wenn die Anfrage immer noch sicher und idempotent ist, die URL-Parameter aber von Benutzereingaben abhängen.
Verwenden Sie ein POST-Formular, wenn die Aktion Seiteneffekte hat
Das Erstellen eines Kontos, das Absenden einer Zahlung oder das Posten eines Kommentars ändern alle den Serverzustand. Diese gehören in POST-Formulare:
<form method="post" action="/register">
<input type="email" name="email">
<input type="password" name="password">
<button type="submit">Konto erstellen</button>
</form>POST sendet Daten im Request-Body, nicht in der URL – was für sensible Daten und nicht-idempotente Aktionen angemessen ist.
Discover how at OpenReplay.com.
Ein häufiger Fehler: method="link" existiert nicht
Einige Entwickler schreiben <form method="link"> in der Hoffnung, eine „Link-Schaltfläche” zu erstellen. Dies ist ungültiges HTML. Browser ignorieren den unbekannten Wert und fallen auf den Standard zurück – welcher GET ist. Das Formular wird trotzdem abgesendet, aber es geschieht stillschweigend und fehlerhaft.
Wenn Sie eine Schaltfläche möchten, die irgendwohin navigiert, verwenden Sie einen als Schaltfläche gestylten Link – kein Formular:
<!-- ❌ Ungültig -->
<form method="link" action="/about">
<input type="submit" value="Zur Über-uns-Seite">
</form>
<!-- ✅ Korrekt -->
<a href="/about" class="btn">Zur Über-uns-Seite</a>Moderne Formularfunktionen, die Sie kennen sollten
HTML5 hat schaltflächenspezifische Überschreibungen über die Attribute formaction und formmethod hinzugefügt, die es einzelnen Submit-Schaltflächen ermöglichen, zu ändern, wohin oder wie ein Formular übermittelt wird:
<form method="post" action="/save">
<button type="submit">Speichern</button>
<button type="submit" formaction="/save-and-publish" formmethod="post">Veröffentlichen</button>
</form>Ebenfalls erwähnenswert: requestSubmit() (im Gegensatz zu submit()) löst die Formularvalidierung vor der Übermittlung aus, was es zur besseren Wahl für die programmatische Formularübermittlung in JavaScript macht.
Für PUT, PATCH oder DELETE unterstützen HTML-Formulare diese nicht nativ. Sie benötigen JavaScript (fetch, XMLHttpRequest) oder eine serverseitige Konvention zur Methodenüberschreibung.
Fazit
Die Entscheidung zwischen Links und Formularen ist unkompliziert, sobald Sie die Semantik verstehen:
- Zu einer Seite navigieren? Verwenden Sie einen Link.
- Benutzereingaben für eine Anfrage sammeln? Verwenden Sie ein GET-Formular.
- Daten übermitteln, die den Serverzustand ändern? Verwenden Sie ein POST-Formular.
- PUT/PATCH/DELETE ausführen? Verwenden Sie JavaScript.
Greifen Sie zu dem Element, das der Absicht der Aktion entspricht. Semantisches HTML geht nicht nur um Korrektheit – es macht Ihre Benutzeroberfläche vorhersehbar, zugänglich und wartbar.
Häufig gestellte Fragen
Technisch ja, aber es ist normalerweise die falsche semantische Wahl. Ein GET-Formular ist dafür konzipiert, Benutzereingaben zu sammeln und sie als Query-Parameter an die URL anzuhängen. Für einfache Navigation ohne Benutzereingaben ist ein Link die korrekte semantische Wahl. Links sind von Suchmaschinen crawlbar, unterstützen Rechtsklick-Kontextmenüs und kommunizieren die Navigationsabsicht klar sowohl an Browser als auch an assistive Technologien.
Browser behandeln jeden nicht erkannten Methodenwert als ungültig und fallen stillschweigend auf GET zurück, welches die Standard-Formularmethode ist. Ein Formular mit method link wird also trotzdem übermittelt, verhält sich aber genau wie ein GET-Formular. Dies kann Fehler verschleiern und zu verwirrendem Verhalten führen. Verwenden Sie immer get oder post als Wert für Ihre Formularmethode.
Die Methode submit() sendet das Formular sofort, ohne die eingebaute HTML-Validierung auszuführen oder das submit-Event auszulösen. Die Methode requestSubmit() verhält sich wie ein Benutzer, der auf die Submit-Schaltfläche klickt. Sie löst zuerst die Constraint-Validierung aus und feuert das submit-Event, wodurch Event-Listener die Übermittlung abfangen oder abbrechen können. Verwenden Sie requestSubmit(), wenn die Validierung ausgeführt werden soll.
HTML-Formulare unterstützen nur GET und POST als Methodenwerte. Um DELETE-, PUT- oder PATCH-Anfragen zu senden, benötigen Sie JavaScript mit fetch oder XMLHttpRequest. Einige serverseitige Frameworks unterstützen auch ein Methodenüberschreibungsmuster, bei dem Sie ein POST-Formular mit einem versteckten Eingabefeld übermitteln, das die beabsichtigte HTTP-Methode angibt, die der Server dann entsprechend interpretiert.
Gain control over your UX
See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.
