FormData

Syntax

const formData = new FormData(formElement);
formData.append(key, value);

Examples

// <form id="signupForm">
//   <input name="email" value="user@example.com">
//   <input name="password" value="secret123">
// </form>

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

console.log(formData.get("email")); // "user@example.com"

const formData = new FormData();
formData.append("username", "alice");
formData.append("avatar", fileInput.files[0]); // a File object from an <input type="file">

fetch("/api/upload", {
  method: "POST",
  body: formData // no need to set Content-Type manually - the browser sets it correctly
});

Best practices

• Use FormData instead of JSON when a request includes file uploads - it correctly handles multipart/form-data encoding
• Do not manually set the Content-Type header when sending FormData with fetch() - the browser sets the correct boundary automatically
• Use formData.getAll() rather than get() when a form has multiple inputs sharing the same name (like checkboxes)
• Construct FormData directly from a form element with new FormData(formElement) rather than manually appending every field, when the form already exists in the DOM

At a glance

Purpose

Application logic and interaction

File extension

.js · .mjs

Runs in

Browsers and JavaScript runtimes

Usually used with

HTML, CSS and Web APIs

Specifications & further reading

• ECMAScript specification

Related JavaScript documentation