HTMLInputElement.formAction — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.formAction

Beschreibung

Die Eigenschaft formAction spiegelt das HTML-Attribut formaction eines <input>-Elements. Sie legt fest, an welche URL das zugehörige Formular gesendet wird, wenn der Benutzer genau dieses Steuerelement zum Absenden nutzt. Dabei überschreibt sie das Attribut action des <form>-Elements, aber nur für diesen einen Absendevorgang.

Wirksam ist formAction nur bei Eingabefeldern mit type="submit" oder type="image". Bei anderen Typen, etwa text oder checkbox, kann man die Eigenschaft zwar lesen und setzen, beim Absenden wird sie aber ignoriert.

Typischer Einsatz: ein Formular mit mehreren Schaltflächen, die unterschiedliche Server-Endpunkte ansprechen, zum Beispiel „Speichern“, „Als Entwurf sichern“ und „Löschen“. Das Formular muss dafür nicht per JavaScript umgebaut werden. Zusammen mit formMethod, formEnctype, formTarget und formNoValidate lässt sich das Absendeverhalten für jede Schaltfläche einzeln steuern.

Beim Lesen liefert die Eigenschaft eine absolute, aufgelöste URL, auch wenn im Attribut ein relativer Pfad steht. Wird ein Wert zugewiesen, setzt der Browser das Attribut formaction entsprechend.

Parameter

Name	Typ	Default	Beschreibung
$value (beim Setzen)	string		Neue Ziel-URL, absolut oder relativ. Relative URLs werden gegen die Basis-URL des Dokuments aufgelöst. Die Zuweisung setzt das Attribut `formaction`.

Rückgabewert

Typ

string

Beschreibung

Die vollständig aufgelöste URL aus dem Attribut formaction. Fehlt das Attribut oder ist es leer, gibt die Eigenschaft laut HTML-Spezifikation die URL des Dokuments zurück und nicht das action des Formulars.

Beispiele

Ziel-URL lesen und ändern

// HTML: <form action="/speichern"><input type="submit" id="entwurf" formaction="entwurf" value="Entwurf"></form>
const btn = document.querySelector('#entwurf');

console.log(btn.formAction);               // absolute URL
console.log(btn.getAttribute('formaction')); // Rohwert

btn.formAction = '/api/entwurf-v2';
console.log(btn.getAttribute('formaction'));

https://example.com/entwurf entwurf /api/entwurf-v2

Mehrere Absende-Schaltflächen mit eigenen Zielen

const form = document.createElement('form');
form.action = '/artikel/speichern';
form.method = 'post';

const aktionen = [
  { label: 'Speichern', url: null },
  { label: 'Vorschau', url: '/artikel/vorschau' },
  { label: 'Löschen', url: '/artikel/loeschen' }
];

for (const { label, url } of aktionen) {
  const input = document.createElement('input');
  input.type = 'submit';
  input.value = label;
  if (url) input.formAction = url; // überschreibt form.action nur für diese Schaltfläche
  form.append(input);
}

document.body.append(form);
console.log([...form.elements].map(el => el.getAttribute('formaction')));

[null, "/artikel/vorschau", "/artikel/loeschen"]

Per fetch absenden und formAction des Submitters beachten

const form = document.querySelector('form');

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const submitter = event.submitter;

  // Nur verwenden, wenn das Attribut wirklich gesetzt ist –
  // sonst liefert formAction die Dokument-URL.
  const ziel = submitter?.hasAttribute('formaction')
    ? submitter.formAction
    : form.action;

  const antwort = await fetch(ziel, {
    method: 'POST',
    body: new FormData(form, submitter)
  });
  console.log(ziel, antwort.status);
});

// Programmatisch mit einem bestimmten Submitter absenden:
form.requestSubmit(document.querySelector('#entwurf'));

https://example.com/entwurf 200

// Wichtig · Fallstricke

Nur bei submit und image wirksam: Bei anderen Eingabetypen hat die Eigenschaft keine Auswirkung auf das Absenden.
Fehlendes Attribut: Ohne formaction liefert der Getter die Dokument-URL und nicht form.action. Mit hasAttribute('formaction') prüfen, bevor man sich auf den Wert verlässt.
form.submit() ignoriert formAction: Es gibt dabei keinen Submitter. Wenn formaction, Validierung und das submit-Event greifen sollen, form.requestSubmit(button) verwenden.
Sicherheit: Die URL nie ungeprüft aus Benutzereingaben oder URL-Parametern übernehmen. Das öffnet Tür und Tor für Open-Redirects und für Datenabfluss an fremde Server (Formular-Hijacking). javascript:-URLs sind ebenfalls gefährlich. Mit der CSP-Direktive form-action lassen sich die erlaubten Ziele einschränken; sie gilt auch für formaction.
Für <button>-Elemente gibt es die gleichwertige Eigenschaft HTMLButtonElement.formAction.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (seit HTML5, auch IE 10+). event.submitter und requestSubmit() sind neuer, aber inzwischen ebenfalls Baseline.

Siehe auch

HTMLInputElement.formMethod HTMLInputElement.formEnctype HTMLInputElement.form HTMLInputElement.formTarget HTMLInputElement.min