JavaScript Academy · Lektion

Das FormData-Objekt

Erstellen Sie Multipart-Payloads aus Formularen.

Das FormData-Objekt ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist FormData?

FormData ist eine Browser-API zum Erstellen einer Sammlung von Schlüssel-Wert-Paaren, die Formularfelder und ihre Werte darstellt. Dies ist die standardmäßige Methode, um Daten einschließlich Dateien für die Übertragung an einen Server zu verpacken.

Die Codierung erfolgt als multipart/form-data, wodurch Binärdatei-Uploads unterstützt werden.

Leeres FormData erstellen

Erstellen Sie ein leeres FormData-Objekt und fügen Sie die Felder mit append einzeln hinzu.

const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');

console.log(data.get('username'));

Aus einem Formularelement erstellen

Übergeben Sie dem Konstruktor ein <form>-Element, damit jedes benannte Eingabefeld automatisch erfasst wird. Dies ist die häufigste Verwendung.

const form = document.querySelector('#signup');
const data = new FormData(form);

for (const [key, value] of data.entries()) {
  console.log(key, value);
}

append vs set

append fügt einen Wert hinzu, auch wenn der Schlüssel bereits vorhanden ist, sodass mehrere Werte pro Schlüssel möglich sind. set ersetzt alle vorhandenen Werte für diesen Schlüssel.

const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));

data.set('tag', 'only');
console.log(data.getAll('tag'));

Werte auslesen

get gibt den ersten Wert für einen Schlüssel zurück, getAll gibt jeden Wert als Array zurück, und has prüft, ob der Schlüssel vorhanden ist.

const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');

console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));

Felder löschen

delete entfernt alle Werte für einen Schlüssel. Das ist nützlich, um Felder vor dem Senden zu entfernen.

const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');

data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));

Einträge durchlaufen

FormData ist iterierbar. Verwenden Sie entries, keys oder values beziehungsweise eine for...of-Schleife, um alle Paare zu durchlaufen.

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

for (const key of data.keys()) {
  console.log('field: ' + key);
}

Dateien anhängen

append kann als Wert ein File- oder Blob-Objekt übernehmen. Ein optionales drittes Argument legt den Dateinamen fest, der an den Server gesendet wird.

const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');

console.log(data.get('avatar').name);

Warum multipart/form-data

FormData wird als multipart/form-data serialisiert und kann sowohl Textfelder als auch binäre Dateiinhalte in einem Request-Body übertragen. Deshalb ist dieses Format die erste Wahl für Datei-Uploads.

const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');

console.log(data.has('photo'));

In ein Objekt umwandeln

Bei einfachen Formularen, die nur Text enthalten, kann Object.fromEntries FormData in ein gewöhnliches Objekt umwandeln. Beachten Sie, dass dabei für wiederholte Schlüssel nur ein Wert erhalten bleibt.

const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());

console.log(plain);

Warum FormData wichtig ist

FormData bildet die Verbindung zwischen HTML-Formularen und Netzwerk-Requests. Es sammelt Felder und Dateien, unterstützt wiederholte Schlüssel und codiert Binärdaten sicher. Als Nächstes lesen Sie Dateiinhalte mit FileReader und senden anschließend FormData mit fetch.

const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');

console.log([...data.keys()]);

Schnelltest

Was ist der Unterschied zwischen append und set bei FormData?

Zusammenfassung: Das FormData-Objekt

Sie haben gelernt, Formulardaten zu verpacken:

new FormData(form) erfasst benannte Eingabefelder automatisch.
append ermöglicht wiederholte Schlüssel, während set sie ersetzt.
Lesen Sie Werte mit get, getAll und has aus und durchlaufen Sie sie mit entries.
Die Codierung erfolgt als multipart/form-data, wodurch Dateien und Binärdaten unterstützt werden.

Häufig gestellte Fragen

Ist die Lektion „Das FormData-Objekt“ kostenlos?

Ja — der vollständige Text von „Das FormData-Objekt“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Das FormData-Objekt“?

Erstellen Sie Multipart-Payloads aus Formularen. Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Das FormData-Objekt“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu JavaScript Academy