Het FormData-object
Bouw multipart-payloads vanuit formulieren.
Het FormData-object is een gratis JavaScript Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat is FormData?
FormData is een browser-API voor het opbouwen van een verzameling sleutel/waardeparen die formuliervelden en hun waarden voorstellen. Het is de standaardmanier om gegevens, waaronder bestanden, te verpakken en naar een server te sturen.
De gegevens worden gecodeerd als multipart/form-data, dat binaire uploads ondersteunt.
Een lege FormData maken
Maak een lege FormData en voeg velden één voor één toe met append.
const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');
console.log(data.get('username'));Opbouwen vanuit een formulierelement
Geef een <form>-element door aan de constructor; elk benoemd invoerveld wordt automatisch overgenomen. Dit is het meest gebruikelijke gebruik.
const form = document.querySelector('#signup');
const data = new FormData(form);
for (const [key, value] of data.entries()) {
console.log(key, value);
}append tegenover set
append voegt een waarde toe, ook als de sleutel al bestaat, zodat je meerdere waarden per sleutel kunt gebruiken. set vervangt alle bestaande waarden voor die sleutel.
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'));Waarden lezen
get geeft de eerste waarde voor een sleutel terug, getAll geeft elke waarde terug als een array en has controleert of de sleutel bestaat.
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'));Velden verwijderen
delete verwijdert alle waarden voor een sleutel. Handig om velden te verwijderen voordat je ze verstuurt.
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'));Items doorlopen
FormData kan worden doorlopen. Gebruik entries, keys of values, of een for...of-lus, om alle paren te doorlopen.
const data = new FormData();
data.append('a', '1');
data.append('b', '2');
for (const key of data.keys()) {
console.log('field: ' + key);
}Bestanden toevoegen
append kan een File of Blob als waarde aannemen. Met een optioneel derde argument stel je de bestandsnaam in die naar de server wordt gestuurd.
const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');
console.log(data.get('avatar').name);Waarom multipart/form-data
FormData zet gegevens om naar multipart/form-data. Daarmee kun je tekstvelden en binaire bestandsinhoud samen in één aanvraagbody versturen. Daarom is dit de standaardindeling voor het uploaden van bestanden.
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'));Omzetten naar een object
Bij eenvoudige formulieren met alleen tekst kan Object.fromEntries FormData omzetten naar een gewoon object. Let op: er blijft maar één waarde per herhaalde sleutel over.
const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());
console.log(plain);Waarom FormData belangrijk is
FormData vormt de verbinding tussen HTML-formulieren en netwerkaanvragen. Het verzamelt velden en bestanden, ondersteunt herhaalde sleutels en codeert binaire gegevens veilig. Vervolgens lees je bestandsinhoud met FileReader en verstuur je FormData met fetch.
const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');
console.log([...data.keys()]);Korte controle
Wat is het verschil tussen append en set bij een FormData?
Samenvatting: het FormData-object
Je hebt geleerd hoe je formuliergegevens verpakt:
new FormData(form)neemt benoemde invoervelden automatisch over.appendstaat herhaalde sleutels toe;setvervangt ze.- Lees met
get,getAllenhas; doorloop metentries. - De gegevens worden gecodeerd als multipart/form-data, dat bestanden en binaire gegevens ondersteunt.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Het FormData-object” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Het FormData-object”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat leer ik in “Het FormData-object”?
Bouw multipart-payloads vanuit formulieren. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Het FormData-object”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.