What is the FormData API?

FormData is a built-in object that collects all of a form's field values as key-value pairs, ready to read or POST via fetch.

const form = document.querySelector("form");
const formData = new FormData(form);

// Get individual values
formData.get("username");
formData.get("email");

// Check if field exists
formData.has("newsletter");

// Iterate all fields
for (const [key, value] of formData) {
    console.log(`${key}: ${value}`);
}

Useful for AJAX submission:

form.addEventListener("submit", async (e) => {
    e.preventDefault();

    const response = await fetch("/api/submit", {
        method: "POST",
        body: new FormData(form)
    });
});

Tip: FormData automatically handles file inputs and maintains proper encoding.

Go deeper:

• FormData (MDN) — constructor and get/getAll/has/append, plus iterating fields.
• fetch() (MDN) — POSTing the form body to a server and handling the Response promise.