new FormData(form)
Collects named form values.
Platform under construction
FormData
FormData reads form fields into a structured object that can be sent with fetch or inspected in JavaScript.
const formData = new FormData(form);
console.log(formData.get("title"));
JSON & Structured Data
FormData is the browser-native way to collect form values.
FormData reads successful form controls by their name attributes. It works with text inputs, selects, checkboxes, files and more.
You can pass FormData directly as a fetch body for multipart form requests. You can also convert it with Object.fromEntries for simple text-only forms.
FormData can hold multiple values for the same name. Use getAll when repeated values matter.
get
Reads the first value for a field.
getAll
Reads every value for repeated fields.
append / set
Adds or replaces values programmatically.
Examples
Structured data code should show the boundary clearly.
Collect values through named fields
<input name="title">
const formData = new FormData(form);
const title = formData.get("title");
Missing name means missing FormData value
<input id="title">
const formData = new FormData(form);
console.log(formData.get("title")); // null
Code patterns
Reusable examples for quick reference.
These patterns focus on the data boundaries you will use constantly: JSON, URLs, forms, files, fetch objects and binary buffers.
Read one field
Use get for one form value.
const formData = new FormData(form);
const title = formData.get("title");
Convert to object
Works well for simple text forms.
const data = Object.fromEntries(new FormData(form));
Repeated values
Use getAll for checkbox groups or repeated names.
const tags = formData.getAll("tag");
Send with fetch
FormData can be used as a request body.
await fetch("/api/records", {
method: "POST",
body: new FormData(form)
});
Rules that matter
Parse, validate and convert data at the edges.
Structured data becomes reliable when every boundary is explicit: text to object, form to values, URL to parameters, response to JSON and bytes to meaning.
Use name attributes
FormData reads names, not ids.
Use getAll for repeated fields
get only returns the first value.
Do not set multipart headers manually
The browser sets the boundary when sending FormData.
Convert carefully
Object.fromEntries loses repeated values.
Validate after reading
FormData does not prove values are correct.
Handle files deliberately
File inputs return File objects.
Production thinking
Trust data only after the code has proved its shape.
Why does this matter?
FormData keeps form handling close to native browser behavior instead of manually querying every input.
Accessibility
Forms should keep labels, names and validation messages aligned so collected values match what users see.
Production note
Production form handling should validate FormData before sending or storing it.
SEO note
Forms usually do not affect SEO directly, but accessible forms improve user experience and conversion.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Remove the name attribute and inspect the output.
- Add a checkbox with the same name twice and use getAll.
- Add validation before printing the data.
Practice assignment
Do this before moving to the next topic.
- Create a form with named fields.
- Read it with new FormData(form).
- Convert simple values with Object.fromEntries.
Try it yourself
Read values from a form
Self-check
Before you continue, prove that you understand FormData.
Structured data is safe only when you know where it came from, what shape it has and what conversion happened before use.
- Can you explain why name matters?
- Can you explain get versus getAll?
- Can you explain when Object.fromEntries is safe?
- Can you explain how FormData works with fetch?
- Can you explain why validation is still required?