HTMLFormElement.method — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFormElement.method

Beschreibung

Die Eigenschaft method eines HTMLFormElement spiegelt das HTML-Attribut method des <form>-Elements. Sie legt fest, wie der Browser die Formulardaten bei einer normalen Übermittlung (ohne JavaScript-Abfangen) sendet.

Zulässige Werte sind:

"get": Die Daten werden als Query-String an die URL aus action angehängt. Das ist der Standardwert.
"post": Die Daten werden im Request-Body gesendet, kodiert nach enctype.
"dialog": Steht das Formular in einem <dialog>, wird der Dialog beim Absenden geschlossen und es gibt keine Netzwerkanfrage.

Beim Lesen liefert die Eigenschaft immer einen normalisierten Wert in Kleinbuchstaben. Ungültige oder fehlende Attributwerte ergeben "get". Beim Setzen wird das Attribut aktualisiert, ein beliebiger String ist erlaubt. Ein Submit-Button kann die Methode mit formmethod für die eigene Übermittlung überschreiben.

Parameter

Name	Typ	Default	Beschreibung
$value	string	"get"	Beim Setzen: die neue Methode, also `"get"`, `"post"` oder `"dialog"`. Groß- und Kleinschreibung spielt keine Rolle.

Rückgabewert

Typ

string

Beschreibung

Die normalisierte Methode in Kleinbuchstaben: "get", "post" oder "dialog". Bei ungültigem oder fehlendem Attribut "get".

Beispiele

Methode auslesen und Normalisierung prüfen

// <form id="login" method="POST" action="/login"></form>
const form = document.getElementById('login');
console.log(form.method);                 // normalisiert
console.log(form.getAttribute('method'));  // Originalwert

const leer = document.createElement('form');
console.log(leer.method); // Standardwert

leer.setAttribute('method', 'PUT'); // ungültig in HTML
console.log(leer.method);

post POST get get

Methode zur Laufzeit umschalten

// <form id="suche" action="/suche">
//   <input name="q"> <input type="file" name="datei" id="datei">
// </form>
const form = document.getElementById('suche');
const datei = document.getElementById('datei');

datei.addEventListener('change', () => {
  // Datei-Uploads brauchen POST und multipart
  const hatDatei = datei.files.length > 0;
  form.method = hatDatei ? 'post' : 'get';
  form.enctype = hatDatei ? 'multipart/form-data' : 'application/x-www-form-urlencoded';
  console.log(`Methode: ${form.method}`);
});

Methode: post

Formular per fetch mit der deklarierten Methode senden

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const button = event.submitter;
  // formmethod am Button hat Vorrang
  const method = (button?.getAttribute('formmethod') ?? form.method).toUpperCase();
  const data = new FormData(form, button);

  let url = form.action;
  const init = { method };
  if (method === 'GET') {
    url += '?' + new URLSearchParams(data);
  } else {
    init.body = data;
  }
  const res = await fetch(url, init);
  console.log(method, res.status);
});

POST 200

Formular in einem Dialog mit method="dialog"

// <dialog id="dlg"><form><button value="ok">OK</button></form></dialog>
const dlg = document.getElementById('dlg');
const form = dlg.querySelector('form');
form.method = 'dialog';

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

Rückgabewert: ok

// Wichtig · Fallstricke

Nur GET, POST und dialog: HTML-Formulare kennen weder PUT noch DELETE oder PATCH. Solche Werte fallen still auf "get" zurück. Für andere Methoden nimmst du fetch() oder ein Framework-Feld wie _method.
Normalisierung: form.method liefert Kleinbuchstaben, fetch() erwartet meist Großbuchstaben. Vor der Übergabe also .toUpperCase() aufrufen.
formmethod hat Vorrang: Ein formmethod-Attribut am Submit-Button überschreibt form.method. Diese Eigenschaft zeigt das nicht an.
Namenskollision: Enthält das Formular ein Feld mit name="method", verdeckt dieses Feld die Eigenschaft: form.method liefert dann das Element. Als sicheren Ausweg nutzt du form.getAttribute('method').
Sicherheit: Bei GET landen die Daten in der URL und damit in Browser-Verlauf, Server-Logs und im Referer-Header. Für Passwörter und personenbezogene Daten immer POST über HTTPS verwenden.
Kompatibilität: get und post funktionieren in allen Browsern. dialog setzt Unterstützung für <dialog> voraus (alle modernen Browser seit 2022).

Siehe auch

HTMLFormElement.action HTMLFormElement.length HTMLFormElement.rel HTMLFormElement.encoding HTMLFormElement.enctype