Signatur
Beschreibung
Die Eigenschaft formMethod spiegelt das HTML-Attribut formmethod eines <button>-Elements wider. Sie legt fest, mit welcher Methode das zugehörige Formular übermittelt wird, wenn genau dieser Button das Absenden auslöst. Dabei überschreibt sie das Attribut method des <form>-Elements, aber nur für diesen einen Absendevorgang.
Gültige Werte sind:
"get": Die Formulardaten werden als Query-String an die URL angehängt."post": Die Formulardaten werden im Anfragekörper gesendet."dialog": Befindet sich das Formular in einem<dialog>, wird der Dialog geschlossen und keine Anfrage gesendet.
Die Eigenschaft ist ein aufgezählter Wert: Beim Lesen bekommst du immer den normalisierten Wert in Kleinbuchstaben zurück. Ungültige Werte werden zu "get" normalisiert. Fehlt das Attribut, ist das Ergebnis ein leerer String. Dann gilt die Methode des Formulars.
Sinnvoll ist das, wenn ein Formular mehrere Aktionen anbietet, zum Beispiel „Vorschau“ per GET und „Speichern“ per POST, oder wenn ein Button in einem Dialog diesen schließen soll, statt Daten zu senden.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value | string | "" | Beim Setzen: "get", "post" oder "dialog". Groß- und Kleinschreibung spielt keine Rolle. Das Setzen schreibt das Attribut formmethod. |
Rückgabewert
"get", "post", "dialog"). Bei fehlendem Attribut ein leerer String, bei ungültigem Wert "get".Beispiele
Methode auslesen und normalisieren
// <form method="get"><button id="save" formmethod="POST">Speichern</button></form>
const btn = document.querySelector('#save');
console.log(btn.formMethod);
btn.setAttribute('formmethod', 'unsinn');
console.log(btn.formMethod);
btn.removeAttribute('formmethod');
console.log(JSON.stringify(btn.formMethod));Vorschau per GET, Speichern per POST
const form = document.createElement('form');
form.action = '/artikel';
form.method = 'get';
const preview = document.createElement('button');
preview.textContent = 'Vorschau';
preview.formMethod = 'get';
preview.formAction = '/artikel/vorschau';
const save = document.createElement('button');
save.textContent = 'Speichern';
save.formMethod = 'post';
form.append(preview, save);
document.body.append(form);
console.log(save.getAttribute('formmethod'));Dialog über einen Button schließen
// <dialog id="dlg"><form><button id="ok" value="ok">OK</button></form></dialog>
const dlg = document.querySelector('#dlg');
const ok = document.querySelector('#ok');
ok.formMethod = 'dialog';
dlg.addEventListener('close', () => {
console.log(`Dialog geschlossen mit: ${dlg.returnValue}`);
});
dlg.showModal();
// Ein Klick auf „OK“ schließt den Dialog ohne HTTP-AnfrageTatsächlich verwendete Methode beim Absenden ermitteln
document.querySelector('form').addEventListener('submit', (event) => {
const submitter = event.submitter;
const method = submitter?.formMethod || event.target.method;
console.log(`Übermittlung per ${method.toUpperCase()}`);
});// Wichtig · Fallstricke
- Nur für Absende-Buttons: Die Eigenschaft wirkt nur bei
type="submit", dem Standardtyp. Beitype="button"odertype="reset"wird sie ignoriert. - Leerer String ≠ „get“: Fehlt das Attribut, liefert
formMethod"". Die tatsächlich genutzte Methode steht dann inform.method. Frag deshalb mitbtn.formMethod || form.methodab. - Nur GET und POST: HTML-Formulare kennen weder
PUTnochDELETEoderPATCH. Solche Werte werden zu"get"normalisiert. Für andere Methoden brauchst dufetch(). form.submit()ignoriert den Button: Beim programmatischenform.submit()giltformMethodnicht. Nutze stattdessenform.requestSubmit(button).- Sicherheit: Sensible Daten wie Passwörter nie per GET senden. Sie landen sonst in der URL, im Verlauf und in Server-Logs.
- Kompatibilität:
"get"und"post"werden seit Langem überall unterstützt."dialog"funktioniert in allen aktuellen Browsern, die<dialog>unterstützen.