HTML action-Attribut

Das HTML-Attribut action gibt die URL an, an die die Formulardaten beim Absenden des Formulars übermittelt werden sollen. Sein Wert ist das Ziel, das die gesendeten Daten verarbeitet — in der Regel ein serverseitiges Skript oder ein Endpunkt.

Dieses Attribut kann nur beim Element <form> verwendet werden. Wenn ein Benutzer ein Absende-Steuerelement aktiviert, sammelt der Browser die benannten Felder des Formulars, kodiert sie und sendet eine Anfrage an die in action angegebene Adresse. Diese Seite erklärt, wie sich action verhält, was passiert, wenn es weggelassen wird, wie es mit anderen Formularattributen zusammenwirkt und wie ein einzelner Button es mit formaction überschreiben kann.

Syntax

<form action="URL"></form>

Die URL kann eine von zwei Arten sein:

Absolut — eine vollständige URL einschließlich Schema und Host, zum Beispiel https://api.example.com/submit. Verwende diese, wenn das Formular an einen anderen Ursprung (eine andere Domain, Subdomain oder ein anderes Schema) senden muss.
Relativ — ein Pfad, der relativ zur URL des aktuellen Dokuments aufgelöst wird, zum Beispiel /form/submit oder save.php. Dies ist die übliche Wahl, wenn das Formular zurück an die eigene Website sendet.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form action="/form/submit">
      <label for="fname">Name</label>
      <input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
      <label for="lname">Surname</label>
      <input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
      <input type="submit" value="Submit"/>
    </form>
  </body>
</html>

Probier es selbst »

Hier wird ein relativer Pfad verwendet, sodass die Daten an /form/submit auf derselben Domain wie die aktuelle Seite gesendet werden. Um an eine andere Domain zu senden, verwende eine absolute URL wie https://example.com/some-page.

Was passiert, wenn `action` weggelassen wird

Wenn action weggelassen (oder auf einen leeren String gesetzt) wird, sendet das Formular an die URL der aktuellen Seite. Dies ist ein gültiges und gängiges Muster: Eine Seite kann sowohl das Formular bereitstellen als auch dessen eigene Übermittlung verarbeiten.

<!-- Both of these submit back to the URL the form was loaded from -->
<form method="post">...</form>
<form action="" method="post">...</form>

Beachte, dass das Absenden an die aktuelle URL mit der standardmäßigen GET-Methode die Formularfelder als Query-String an die URL anhängt, wodurch die Seite mit diesen in der Adressleiste sichtbaren Werten neu geladen wird.

Wie `action` mit anderen Formularattributen zusammenwirkt

Das Attribut action arbeitet nie allein — es legt fest, wohin die Daten gehen, während andere Attribute von <form> festlegen, wie sie dorthin gelangen:

method — wählt die HTTP-Methode. Mit GET (dem Standard) werden die kodierten Felder als Query-String an die action-URL angehängt, sodass die URL zu action?name=value&... wird. Mit POST werden die Felder im Anfragekörper übermittelt, wodurch die URL sauber bleibt.
enctype — legt fest, wie der Körper kodiert wird, und ist nur bei POST relevant. Das Standard-application/x-www-form-urlencoded eignet sich für Text; multipart/form-data wird benötigt, wenn das Formular einen Dateiupload enthält (<input type="file">).
target — bestimmt, wo die Antwort angezeigt wird, zum Beispiel _self (gleicher Tab, Standard), _blank (neuer Tab) oder der Name eines <iframe>.

Mehr dazu findest du in der Referenz zum <form>-Tag und im umfassenden Leitfaden zu HTML-Formularen.

Absolute vs. relative URLs: Abwägungen

Die Wahl zwischen einer absoluten und einer relativen action ist mehr als eine stilistische Präferenz:

Relative URLs binden das Formular an die Website, die es bereitstellt. Sie überleben den Umzug der Website auf eine neue Domain oder den Wechsel zwischen http und https, und sie halten die Übermittlung same-origin, was Cross-Origin-Komplikationen vermeidet.
Absolute URLs sind erforderlich, wenn an einen anderen Ursprung gesendet werden muss (zum Beispiel ein Drittanbieter-Formular-Handler oder ein separater API-Host). Sei hier bewusst: Ein POST an einen anderen Ursprung ist eine Cross-Origin-Anfrage. Der empfangende Server muss diese akzeptieren, und die Anfrage kann für die geskripteten Teile deiner Seite CORS-Regeln unterliegen.

Ein Sicherheitshinweis: Formulare können Daten an jeden Ursprung senden, den du in action angibst, und Browser senden dabei die Cookies dieses Ursprungs mit der Anfrage. Dies ist genau der Mechanismus hinter Cross-Site Request Forgery (CSRF) — eine bösartige Seite kann ein Formular hosten, das an deine Website postet. Setze action daher nur auf Ursprünge, denen du vertraust, und schütze jeden zustandsändernden Endpunkt mit einem Anti-CSRF-Token, das auf dem Server validiert wird. Bevorzuge relative (same-origin) Actions, es sei denn, du hast einen konkreten Grund, Daten anderswohin zu senden.

`action` mit `formaction` überschreiben

Ein einzelnes Formular kann mehr als einen Sende-Button haben, und jeder kann die Daten mit dem Attribut formaction an einen anderen Ort senden. Wenn formaction beim Button oder Input vorhanden ist, der die Übermittlung ausgelöst hat, überschreibt es die eigene action des Formulars. (Die verwandten Attribute formmethod, formenctype und formtarget überschreiben entsprechend method, enctype und target.)

<!DOCTYPE html>
<html>
  <head>
    <title>formaction example</title>
  </head>
  <body>
    <form action="/articles/publish" method="post">
      <label for="title">Title</label>
      <input type="text" name="title" id="title" value="My draft"/><br /><br />

      <!-- Uses the form's action: /articles/publish -->
      <button type="submit">Publish</button>

      <!-- Overrides the action just for this button -->
      <button type="submit" formaction="/articles/save-draft">Save draft</button>
    </form>
  </body>
</html>

Beide Buttons senden dieselben Felder, aber "Publish" sendet an /articles/publish, während "Save draft" an /articles/save-draft sendet. formaction wird bei <button type="submit"> und <input type="submit"> (sowie <input type="image">) unterstützt und hat keine Wirkung auf Nicht-Sende-Steuerelemente.

Übungen

Übung

Was ist die Funktion des HTML-Attributs 'action'?

Es gibt die URL an, an die die Formulardaten beim Absenden des Formulars gesendet werden.Es ändert die Farbe des Textes innerhalb eines Formulars.Es fügt HTML-Elementen zusätzliches Styling hinzu.Es definiert den Typ des Formularelements (z. B. input, select).Wenn es weggelassen wird, verhindert es das Absenden des Formulars vollständig.