FormData.keys() — Methode · JavaScript-Referenz

Signatur

FormData.prototype.keys()

Beschreibung

FormData.keys() liefert einen Iterator über alle Feldnamen, die in einem FormData-Objekt stehen. Die Schlüssel sind immer Zeichenketten und kommen in der Reihenfolge, in der sie eingefügt wurden, also per append(), set() oder beim Einlesen eines <form>-Elements.

Die Methode ist praktisch, wenn Sie prüfen möchten, welche Felder ein Formular tatsächlich übermittelt. Beispiele sind Debugging, eine Validierung vor dem fetch()-Aufruf oder das Aufspüren unerwarteter Felder. Weil der Iterator das Iterator-Protokoll erfüllt, funktioniert er direkt mit for...of, dem Spread-Operator oder Array.from().

Wichtig: Mehrfach vorhandene Namen, etwa bei Checkbox-Gruppen oder <select multiple>, werden einzeln geliefert. Ein Name kann also mehrmals vorkommen. Für eine eindeutige Liste wickeln Sie das Ergebnis in ein Set ein. Die zugehörigen Werte liefern values() oder entries().

Rückgabewert

Typ

Iterator<string>

Beschreibung

Ein Iterator, der alle Schlüssel des FormData-Objekts als Zeichenketten liefert – doppelte Namen einzeln, in Einfügereihenfolge.

Beispiele

Schlüssel mit for...of durchlaufen

const data = new FormData();
data.append('benutzer', 'anna');
data.append('email', 'anna@example.com');
data.append('newsletter', 'ja');

for (const key of data.keys()) {
  console.log(key);
}

benutzer email newsletter

Doppelte Namen erkennen und eindeutige Liste bilden

const data = new FormData();
data.append('tags', 'js');
data.append('tags', 'css');
data.append('titel', 'Mein Beitrag');

const alle = [...data.keys()];
const eindeutig = [...new Set(data.keys())];

console.log(alle);
console.log(eindeutig);

['tags', 'tags', 'titel'] ['tags', 'titel']

Pflichtfelder eines Formulars vor dem Absenden prüfen

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

form.addEventListener('submit', async (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const vorhanden = new Set(data.keys());
  const pflicht = ['name', 'email', 'nachricht'];
  const fehlend = pflicht.filter((feld) => !vorhanden.has(feld));

  if (fehlend.length > 0) {
    console.warn('Fehlende Felder:', fehlend.join(', '));
    return;
  }

  await fetch('/api/kontakt', { method: 'POST', body: data });
});

// Wichtig · Fallstricke

Duplikate: Ein Name kommt so oft vor, wie er angehängt wurde. Brauchen Sie jeden Namen nur einmal, nutzen Sie new Set(formData.keys()).
Einmal verbrauchbar: Der Iterator lässt sich nur einmal durchlaufen. Für einen zweiten Durchlauf rufen Sie keys() erneut auf oder wandeln das Ergebnis vorher mit Array.from() in ein Array um.
Kein Array: Der Rückgabewert hat keine Array-Methoden wie map() oder filter(). Wandeln Sie ihn zuerst um. In neueren Umgebungen gibt es auch Iterator-Helfer (Iterator.prototype.map, ES2025).
Nicht übermittelte Felder: Beim Einlesen eines <form> fehlen deaktivierte Felder, nicht angehakte Checkboxen und Felder ohne name-Attribut. Solche Schlüssel tauchen also nicht auf.
Kompatibilität: Wird von allen modernen Browsern unterstützt, nicht aber vom Internet Explorer. In Node.js ist FormData ab Version 18 global verfügbar.

Siehe auch

FormData FormData.values() FormData.entries() FormData.has() FormData.getAll() URLSearchParams.keys() CSSTransformValue.keys()