FormData gives JavaScript the same name-value model used by native form submission.

Create it from the form. Include the submitter when a button started the submission:

const data = event.submitter
  ? new FormData(form, event.submitter)
  : new FormData(form)

for (const [name, value] of data) {
  console.log(name, value)
}

The entries follow successful-control rules. Unnamed and disabled fields are missing. Unchecked checkboxes are missing. File inputs produce File values. Passing the submitter preserves the activated button’s name and value. event.submitter can be null when no button triggered the submission, so the fallback uses the one-argument constructor.

Use get() for a field with one value. Use getAll() when repeated controls share a name:

const topics = data.getAll('topic')

append() adds another value. set() replaces all current values under that name. This difference matters when building multi-select or checkbox data.

Do not convert FormData directly with Object.fromEntries() unless repeated keys are impossible. An object can hold only one property per key, so earlier values may disappear.

You can send the object directly with fetch(). Let the browser create the multipart header. If the endpoint expects JSON instead, convert values deliberately and remember that files need another plan.

Print the entries from a form containing a disabled input, unchecked checkbox, two checked topics, and one file. Compare the output with what you see on screen.