0Pricing
HTML Academy · Lesson

The FormData API

Collect form data programmatically with the FormData interface.

What FormData Is

FormData is a built-in object representing form fields and their values, suitable for direct submission via fetch or XMLHttpRequest. It handles file uploads, multipart encoding, and arbitrary key-value pairs without manual serialization.

Construct From a Form

Pass a <form> element to the constructor: const data = new FormData(formElement). The result contains every successful form control (named inputs, selects, textareas, checked checkboxes, files). Disabled and unchecked controls are excluded automatically.

document.forms.checkout.addEventListener("submit", async (e) => {
  e.preventDefault();
  const data = new FormData(e.target);
  await fetch("/api/checkout", { method: "POST", body: data });
});

All lessons in this course

  1. The FormData API
  2. The Constraint Validation API
  3. reportValidity and setCustomValidity
  4. Form Reset Events and State Management
← Back to HTML Academy