HTMLFormElement.action — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFormElement.action

Beschreibung

Die Eigenschaft action eines HTMLFormElement spiegelt das gleichnamige HTML-Attribut des <form>-Elements wider. Sie legt fest, an welche URL das Formular beim Absenden seine Daten überträgt. Man kann sie lesen und auch schreiben.

Beim Lesen liefert sie immer eine absolute, aufgelöste URL. Steht im Attribut z. B. action="/login", erhält man https://example.com/login. Fehlt das Attribut oder ist es leer, wird die URL des aktuellen Dokuments zurückgegeben. Den Rohwert aus dem Markup bekommt man mit form.getAttribute("action").

Beim Schreiben wird das Attribut action gesetzt. Das ist praktisch, wenn ein Formular je nach Benutzerauswahl an verschiedene Endpunkte gehen soll, etwa bei Mehrsprachigkeit, A/B-Tests oder unterschiedlichen Aktionen. Hat ein Absende-Button das Attribut formaction, hat dieses beim Absenden über genau diesen Button Vorrang vor form.action.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: eine relative oder absolute URL. Relative Angaben werden beim Lesen relativ zur Basis-URL des Dokuments aufgelöst (`document.baseURI`, beeinflusst durch `<base>`).

Rückgabewert

Typ

string

Beschreibung

Die vollständig aufgelöste Ziel-URL des Formulars. Fehlt das Attribut action oder ist es leer, ist das die URL des Dokuments.

Beispiele

Ziel-URL lesen: aufgelöster Wert und Rohwert

// <form id="login" action="/api/login" method="post">...</form>
const form = document.getElementById('login');

console.log(form.action);                 // aufgelöste, absolute URL
console.log(form.getAttribute('action')); // Rohwert aus dem Markup

https://example.com/api/login /api/login

Ziel abhängig von der Benutzerauswahl setzen

// <form id="search"><select name="engine">...</select><input name="q"></form>
const form = document.getElementById('search');
const engine = form.elements.engine;

const targets = {
  docs: '/docs/suche',
  forum: '/forum/suche'
};

engine.addEventListener('change', () => {
  form.action = targets[engine.value] ?? '/suche';
  console.log('Neues Ziel:', form.action);
});

Neues Ziel: https://example.com/forum/suche

action als Endpunkt für fetch nutzen (progressive Verbesserung)

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // Berücksichtigt auch formaction des auslösenden Buttons
  const url = event.submitter?.formAction || form.action;

  const response = await fetch(url, {
    method: form.method, // 'get' oder 'post'
    body: new FormData(form)
  });
  console.log(response.ok ? 'Gesendet' : `Fehler: ${response.status}`);
});

Gesendet

// Wichtig · Fallstricke

Aufgelöste statt roher Wert: form.action liefert immer eine absolute URL, auch wenn das Attribut fehlt. Dann ist es die URL des Dokuments. Ob wirklich ein Ziel gesetzt ist, prüft man mit form.hasAttribute('action').
Überschattung durch Formularfelder: Enthält das Formular ein Feld mit name="action" oder id="action", liefert form.action dieses Element statt der URL. Dann hilft form.getAttribute('action'). Besser ist es, solche Namen gar nicht erst zu vergeben.
formaction hat Vorrang: Ein Absende-Button mit formaction überschreibt beim Absenden über diesen Button das Formularziel.
Sicherheit: Keine ungeprüften Benutzereingaben oder URL-Parameter in form.action schreiben. Sonst drohen offene Weiterleitungen, das Abgreifen von Formulardaten oder javascript:-URLs (XSS). Die CSP-Direktive form-action schränkt erlaubte Ziele zusätzlich ein.
Kompatibilität: Wird von allen Browsern unterstützt. Sehr alte Browser gaben teils den Rohwert statt der aufgelösten URL zurück.

Siehe auch

HTMLFormElement.method HTMLFormElement.enctype HTMLFormElement.encoding HTMLFormElement.length HTMLFormElement.name