The FormData() constructor creates a new FormData object.

Note: This feature is available in Web Workers.


new FormData()
new FormData(form)


form Optional

An HTML <form> element — when specified, the FormData object will be populated with the form's current keys/values using the name property of each element for the keys and their submitted value for the values. It will also encode file input content.


Creating an empty FormData

The following line creates an empty FormData object:

const formData = new FormData();

You could add a key/value pair to this using append():

formData.append('username', 'Chris');

Prepopulating from a HTML form element

You can specify the optional form argument when creating the FormData object, to prepopulate it with values from the specified form.

Note: Only successful form controls are included in a FormData object, i.e. those with a name and not in a disabled state.


<form id="form">
  <input type="text" name="text1" value="foo" />
  <input type="text" name="text2" value="bar" />
  <input type="text" name="text2" value="baz" />
  <input type="checkbox" name="check" checked disabled />

<output id="output"></output>


const form = document.getElementById('form');
const formData = new FormData(form);

const output = document.getElementById('output');

for (const [key, value] of formData) {
  output.textContent += `${key}: ${value}\n`;


For brevity, the <form> element is hidden from view.


XMLHttpRequest Standard
# dom-formdata

Browser compatibility

BCD tables only load in the browser

See also