Was das HTML Form Action Attribut wirklich tut (und warum es wichtig ist)

Das HTML-Attribut action in Formularen teilt dem Browser mit, wohin die Formulardaten gesendet werden sollen, wenn ein Benutzer auf Absenden klickt. Es ist die URL, die die Formularübermittlung empfängt. Ohne dieses Attribut hat dein Formular keine Zieldestination. Der Unterschied zwischen einem Kontaktformular, das Nachrichten wirklich zustellt, und einem, das stillschweigend nichts tut, liegt genau hier.

Was das action-Attribut wirklich tut

Wenn ein Benutzer ein Formular ausfüllt und auf Absenden klickt, packt der Browser alle Formulardaten in eine Anfrage und sendet sie an die URL, die im action Attribut angegeben ist. Diese URL wird als Formular-Endpoint bezeichnet. Der Server an diesem Endpoint empfängt die Daten, verarbeitet sie und sendet normalerweise eine Antwort zurück.

Hier ist das einfachste mögliche Beispiel:

<form action="https://example.com/submit" method="POST">
  <input name="name" type="text"/>
  <button type="submit">Send</button>
</form>

Wenn der Benutzer auf „Senden" klickt, sendet der Browser eine POST-Anfrage an https://example.com/submit mit den Formulardaten. Der Server an dieser Adresse kümmert sich um den Rest.

Wenn du das action Attribut ganz weglässt, sendet der Browser das Formular zurück zur aktuellen Seiten-URL. Das ist gelegentlich für serverseitig gerenderte Apps nützlich, aber in den meisten Fällen bedeutet es, dass deine Daten ins Leere gehen.

Was in die Formular-Action-URL gehört

Die Formular-Action-URL kann sein:

• Eine absolute URL wie https://api.example.com/contact . Dies sendet Daten an einen völlig anderen Server oder Service.
• Eine relative URL wie /submit oder submit.php . Der Browser löst diese gegen die Domain der aktuellen Seite auf.
• Ein leerer String ( action="" ). Sendet an die aktuelle Seite, genauso wie das Weglassen des Attributs.

Bei den meisten echten Kontaktformularen verwendest du eine absolute URL, die entweder auf dein eigenes serverseitiges Skript (eine PHP-Datei, einen Node.js-Endpoint usw.) oder einen Third-Party-Formular-Backend-Service verweist. Die Grundvoraussetzung ist, dass etwas an dieser URL läuft, um die Anfrage zu empfangen und zu verarbeiten.

Warum method genauso wichtig ist wie action

Das method Attribut arbeitet zusammen mit action um zu definieren, wie die Daten gesendet werden. Es gibt zwei Optionen:

Bei Kontaktformularen verwendest du immer method="POST" . GET-Anfragen machen Feldwerte in der Browser-Adressleiste sichtbar, werden im Browser-Verlauf gespeichert und haben Längenbeschränkungen, die längere Nachrichten abschneiden. POST hat keine dieser Probleme.

Standardmäßig senden HTML-Formulare Daten als application/x-www-form-urlencoded , was Feldnamen und Werte in einen strukturierten String codiert. Die meisten Formular-Backends und Services akzeptieren dieses Format direkt.

Das Problem mit statischen Websites

Hier stoßen Entwickler auf eine Hürde. Wenn deine Website rein statisch ist (einfache HTML-Dateien gehostet auf GitHub Pages, Cloudflare Pages oder ähnlichen Hosting-Diensten), läuft auf deiner Domain kein serverseitiger Code. Du kannst deine Formular-Action nicht einfach auf ein PHP-Skript verweisen, weil es keine PHP-Runtime gibt, die es ausführen würde.

Das bedeutet, deine Formular-Action-URL muss auf etwas ganz anderes verweisen. Deine Optionen sind:

• Schreibe und hoste deine eigene Backend-API (Node.js, Python usw.) auf einem separaten Server
• Nutze eine serverlose Funktion (AWS Lambda, Cloudflare Workers)
• Nutze einen Formular-Backend-Service, der dir einen fertigen HTML-Formular-Endpoint gibt

Die dritte Option ist am schnellsten für die meisten Projekte. Du bekommst eine URL, die du direkt in dein action Attribut einfügen kannst, und Übermittlungen landen sofort in deinem Postfach, ohne dass du Backend-Code schreiben musst. Wenn du neugierig bist, wie das im Vergleich zum Schreiben eines eigenen serverseitigen Handlers aussieht, erklärt die Übersicht PHP vs. serverlose Formulare die Vor- und Nachteile deutlich.

Einen Formular-Endpoint-Service nutzen

Ein Formular-Endpoint-Service wie Sendform.net funktioniert, indem er dir eine eindeutige URL gibt, die als dein Formular-Action-Attribut dient. Du verweist dein Formular dorthin, und der Service leitet Übermittlungen an deine E-Mail weiter. Kein Backend nötig.

So sieht das in der Praxis aus:

<form action="https://sendform.net/en/!a8Kz3mXq12" method="POST">
  <input name="email" placeholder="[email protected]" required="" type="email"/>
  <textarea name="message" placeholder="Tell us more" required=""></textarea>
  <button type="submit">Send</button>
</form>

Die Einrichtung ist unkompliziert:

1. Melde dich bei Sendform.net an und erstelle ein Formular, um deine persönliche Endpoint-URL zu erhalten.
2. Öffne den Reiter Integration und kopiere den Endpoint.
3. Füge ihn als action Attribut deines Formulars mit method="POST" ein.
4. Stelle sicher, dass dein Formular ein <input/> mit name="email" und einen <textarea> </textarea> mit name="message" hat.
5. Deploye deine Website. Übermittlungen landen sofort in deinem Benachrichtigungs-Postfach.

Sendform hat auch einen Snippet Builder im Reiter Integration. Wähle „HTML" im Framework-Selector aus, stelle optional eine Redirect-URL für eine benutzerdefinierte Dankesseite ein und aktiviere ein Honeypot-Feld für grundlegenden Spam-Schutz. Es generiert den kompletten Formular-Snippet zum Kopieren.

Das formaction-Attribut auf Schaltflächen

Es gibt einen weniger bekannten Verwandten des Formular-Action-Attributs: formaction auf einzelnen Absenden-Schaltflächen. Es überschreibt das action des Formulars nur für diese spezifische Schaltfläche.

<form action="/default-endpoint" method="POST">
  <input name="query" type="text">
  <button type="submit">Save</button>
  <button formaction="/preview-endpoint" type="submit">Preview</button>
</input></form>

Wenn du auf „Speichern" klickst, werden Daten an /default-endpoint gesendet. Wenn du auf „Vorschau" klickst, werden dieselben Daten stattdessen an /preview-endpoint gesendet. Das formaction HTML-Attribut wird in allen modernen Browsern unterstützt und ist im WHATWG HTML Living Standard definiert.

Das ist nützlich für Formulare mit mehreren Aktionen (speichern vs. veröffentlichen, speichern vs. löschen), ohne dass du JavaScript brauchst, um die Action des Formulars dynamisch zu wechseln.

Was nach dem Absenden passiert

Nachdem der Browser die Anfrage an die Formular-Action-URL sendet, bestimmt die Antwort des Servers, was der Benutzer als Nächstes sieht:

• Redirect-Antwort (HTTP 302/303): Der Server sendet den Browser zu einer neuen URL. Häufiges Muster zum Anzeigen einer „Danke"-Seite.
• HTML-Antwort: Der Server gibt eine Seite direkt zurück, die die aktuelle Seite im Browser ersetzt.
• Kein Redirect konfiguriert: Bei Sendform gibt der Service seine eigene Bestätigungsseite zurück, wenn du keine Redirect-URL eingestellt hast.

Wenn du möchtest, dass der Benutzer nach der Übermittlung auf deiner Website bleibt, konfiguriere eine Redirect-URL, die auf deine eigene Dankesseite verweist. In Sendform stellst du das im Snippet Builder oder in den Formulareinstellungen ein. Der Browser landet dann auf deiner Seite statt auf dem Standard-Bestätigungsbildschirm des Services.

Für Entwickler, die Übermittlungen ohne vollständiges Neuladen der Seite verarbeiten möchten, kannst du das Formular-Submit mit JavaScript abfangen, die Daten via fetch() senden und die Benutzeroberfläche selbst aktualisieren. In diesem Fall dient das action Attribut immer noch als nützlicher Fallback für Benutzer mit deaktiviertem JavaScript.

Häufige Fehler

• GET statt POST für Kontaktformulare verwenden. Feldwerte einschließlich E-Mail-Adressen landen in Server-Logs und Browser-Verlauf.
• Die Action auf eine statische Datei verweisen. HTML- und CSS-Dateien können Formularübermittlungen nicht verarbeiten. Die Action-URL braucht einen Server oder Service dahinter.
• Das Action-Attribut ganz vergessen. Das Formular sendet zur aktuellen Seite zurück, was normalerweise nur ein Neuladen ohne Effekt ist.
• Feldnamen stimmen nicht überein. Wenn der Endpoint name="email" erwartet und dein Input name="Email" hat, schlägt die Übermittlung auf der Server-Seite stillschweigend fehl.
• Eine relative URL für einen Cross-Origin-Endpoint verwenden. Wenn dein Formular-Backend auf einer anderen Domain läuft, brauchst du die vollständige absolute URL inklusive Protokoll.

Für Webflow-Benutzer hat die Formular-Action-Einrichtung einige plattformspezifische Besonderheiten, die es wert sind, bekannt zu sein. Der Webflow-Kontaktformular-Leitfaden behandelt, wie man ein Webflow-Formular auf einen externen Endpoint verweist, ohne serverseitigen Code zu schreiben.

Bekomme eine echte HTML-Formular-Action-URL in unter einer Minute

Sendform.net gibt dir einen fertigen HTML-Formular-Endpoint, den du direkt in das Action-Attribut deines Formulars einfügen kannst. Kein Backend, kein JavaScript erforderlich. Verweise dein Formular auf deinen persönlichen Endpoint und Übermittlungen landen sofort in deinem Postfach.

Erstelle deinen Formular-Endpoint →