References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript FormData object

Object JavaScript All modern browsers Updated
Quick answer

The FormData object collects a form's fields into a key-value structure you can read or send. const data = new FormData(formElement) grabs every named field at once. It's the standard way to submit forms (including file uploads) with fetch(), since you can pass it straight as the request body.

Overview

FormData gathers up form fields so you can work with them in JavaScript. Pass a <form> element to the constructor — new FormData(form) — and it captures every field that has a name, including text inputs, selects, checkboxes and file inputs. That last point is key: FormData is how you upload files, which a plain JSON body can't do.

To read values, use get(name) (first value) and getAll(name) (all values, for things like multiple checkboxes). To build or extend one manually, append(name, value) adds fields and set(name, value) replaces them — handy for adding extra data alongside the form. It's iterable, so Object.fromEntries(formData) gives you a plain object of the simple fields.

Its headline use is sending a form with fetch(): fetch(url, { method: "POST", body: formData }). The browser automatically sets the correct multipart/form-data content type and boundary — so you should not set the Content-Type header yourself, a common mistake that breaks the upload. Combined with event.preventDefault() on the form's submit, it's the modern pattern for AJAX form submission.

Syntax

const data = new FormData(formElement);   // from a <form>
data.get("email");        // first value
data.getAll("interest");  // all values (e.g. checkboxes)
data.append("extra", 1);  // add a field

// send it (don't set Content-Type yourself)
fetch("/submit", { method: "POST", body: data });

Example

Live example 
<form id="form" style="font:15px system-ui">
  <input name="name" value="Ada">
  <input name="email" value="ada@x.com">
  <button>Read form</button>
</form>
<pre id="out" style="font:14px ui-monospace,monospace"></pre>
<script>
  document.getElementById('form').addEventListener('submit', (e) => {
    e.preventDefault();
    const data = new FormData(e.target);
    document.getElementById('out').textContent =
      JSON.stringify(Object.fromEntries(data), null, 2);
  });
</script>

Best practices

  • Create it from the form element — new FormData(form) — to capture all named fields at once.
  • Use it for file uploads; a JSON body can't carry files, but FormData can.
  • When sending with fetch(), do NOT set Content-Type — the browser sets it (with the boundary) for you.
  • Convert simple fields to an object with Object.fromEntries(formData).

Frequently asked questions

How do I get all form values in JavaScript?
Use new FormData(formElement), then read fields with get()/getAll(), or convert with Object.fromEntries(data).
How do I upload a file with fetch?
Put the file in a FormData (from a form with a file input) and pass it as the body: fetch(url, { method: "POST", body: formData }).
Why shouldn't I set Content-Type with FormData?
The browser sets multipart/form-data with the correct boundary automatically. Setting it yourself omits the boundary and breaks the request.
How do I convert FormData to an object?
Use Object.fromEntries(formData) for simple fields (note repeated keys keep only the last value).
Error globalThis