JavaScript Academy · Lesson

The FormData Object

Build multipart payloads from forms.

The FormData Object is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is FormData?

FormData is a browser API for building a set of key/value pairs representing form fields and their values. It is the standard way to package data, including files, for sending to a server.

It encodes as multipart/form-data, which supports binary uploads.

Creating an Empty FormData

Construct an empty FormData and add fields one at a time with append.

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

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

Building From a Form Element

Pass a <form> element to the constructor and every named input is captured automatically. This is the most common usage.

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 adds a value even if the key already exists, allowing multiple values per key. set replaces all existing values for that key.

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'));

Reading Values

get returns the first value for a key, getAll returns every value as an array, and has checks existence.

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'));

Deleting Fields

delete removes all values for a key. Useful for stripping fields before sending.

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'));

Iterating Entries

FormData is iterable. Use entries, keys, or values, or a for...of loop, to walk all pairs.

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

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

Appending Files

append can take a File or Blob as the value. An optional third argument sets the filename sent to the server.

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

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

Why multipart/form-data

FormData serializes as multipart/form-data, which can carry both text fields and binary file contents in one request body. This is why it is the go-to format for file 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'));

Converting to an Object

For simple text-only forms, Object.fromEntries can turn FormData into a plain object. Note this keeps only one value per repeated key.

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

console.log(plain);

Why FormData Matters

FormData is the bridge between HTML forms and network requests. It collects fields and files, supports repeated keys, and encodes binary safely. Next you will read file contents with FileReader, then send FormData with fetch.

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

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

Quick Check

What is the difference between append and set on a FormData?

Recap: The FormData Object

You learned to package form data:

new FormData(form) captures named inputs automatically.
append allows repeated keys; set replaces them.
Read with get, getAll, has; iterate with entries.
It encodes as multipart/form-data, supporting files and binary.

Frequently asked questions

Is the “The FormData Object” lesson free?

Yes — the full text of “The FormData Object” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “The FormData Object”?

Build multipart payloads from forms. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The FormData Object” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to JavaScript Academy