HTMLInputElement.formMethod — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.formMethod

Beschreibung

Die Eigenschaft formMethod spiegelt das HTML-Attribut formmethod eines <input>-Elements wider. Sie überschreibt für genau diesen Absende-Knopf das Attribut method des zugehörigen <form>-Elements. Wirkung hat sie nur bei <input type="submit"> und <input type="image">, also bei Elementen, die ein Formular tatsächlich absenden können.

Gültige Werte sind "get" (Daten landen als Query-String in der URL), "post" (Daten im Anfrage-Body) und "dialog" (schließt ein umgebendes <dialog>, ohne Daten zu senden). Die Eigenschaft ist ein aufgezählter Wert: Beim Lesen kommt immer die normalisierte Kleinschreibung zurück. Fehlt das Attribut, ist der Wert ein leerer String. Bei einem ungültigen Wert liefert der Getter "get".

Praktisch ist das, wenn ein Formular mehrere Aktionen anbietet, etwa „Vorschau“ per GET und „Speichern“ per POST. Oft kombiniert man formMethod mit formAction, damit der jeweilige Knopf auch an einen anderen Endpunkt sendet.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: `"get"`, `"post"` oder `"dialog"`. Groß- und Kleinschreibung spielt keine Rolle. Das Setzen schreibt das Attribut `formmethod`.

Rückgabewert

Typ

string

Beschreibung

Die normalisierte Methode in Kleinbuchstaben: "get", "post" oder "dialog". Fehlt das Attribut, kommt "" zurück; bei ungültigem Wert "get".

Beispiele

Methode eines Absende-Knopfs auslesen

// HTML:
// <form action="/suche" method="get">
//   <input type="submit" id="save" value="Speichern" formmethod="POST">
// </form>
const saveBtn = document.getElementById('save');
console.log(saveBtn.formMethod);
console.log(saveBtn.form.method);

post get

Vorschau per GET, Speichern per POST

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

const preview = document.createElement('input');
preview.type = 'submit';
preview.value = 'Vorschau';
preview.formMethod = 'get';
preview.formAction = '/artikel/vorschau';

const save = document.createElement('input');
save.type = 'submit';
save.value = 'Speichern';

form.append(preview, save);
document.body.append(form);

console.log(preview.formMethod, save.formMethod || form.method);

get post

Dialog über einen Knopf schließen

// HTML:
// <dialog id="dlg"><form method="post" action="/senden">
//   <input type="submit" id="cancel" value="Abbrechen">
// </form></dialog>
const dlg = document.getElementById('dlg');
const cancel = document.getElementById('cancel');
cancel.formMethod = 'dialog'; // schließt den Dialog ohne Anfrage
cancel.formNoValidate = true;

dlg.addEventListener('close', () => {
  console.log('Dialog geschlossen, Rückgabewert:', dlg.returnValue);
});
dlg.showModal();

Dialog geschlossen, Rückgabewert: Abbrechen

Normalisierung und ungültige Werte

const btn = document.createElement('input');
btn.type = 'submit';
console.log(JSON.stringify(btn.formMethod)); // Attribut fehlt
btn.formMethod = 'POST';
console.log(btn.formMethod, btn.getAttribute('formmethod'));
btn.formMethod = 'put';
console.log(btn.formMethod);

"" post POST get

// Wichtig · Fallstricke

Nur GET und POST: Methoden wie PUT, PATCH oder DELETE werden von HTML-Formularen nicht unterstützt. Ungültige Werte fallen stillschweigend auf "get" zurück. Für andere Methoden nimm fetch().
Nur für Absende-Typen: Bei type="text", "button" usw. lässt sich die Eigenschaft zwar setzen, sie hat aber keine Wirkung.
Leerer String statt Formular-Methode: Fehlt formmethod, liefert der Getter "" und nicht den Wert von form.method. Für die tatsächlich verwendete Methode also btn.formMethod || btn.form.method prüfen.
Programmatisches Absenden: form.submit() beachtet formMethod nicht. form.requestSubmit(btn) dagegen schon, weil der Knopf dabei als auslösendes Element übergeben wird.
Sicherheit: Bei GET stehen die Daten in der URL und damit im Verlauf, in Server-Logs und im Referer. Für sensible Daten also nie get verwenden.
Der Wert "dialog" funktioniert in allen aktuellen Browsern, in sehr alten Versionen fehlt er. Die Grundwerte get/post werden überall unterstützt.

Siehe auch

HTMLInputElement.formAction HTMLInputElement.form HTMLInputElement.formEnctype HTMLInputElement.formTarget HTMLInputElement.checked