FormData()

The FormData() constructor creates a new FormData object.

Note: This feature is available in Web Workers.

Syntax

new FormData()
new FormData(form)

Parameters

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.

Examples

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.

HTML

<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 />
</form>

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

form {
  display: none;
}

output {
  display: block;
  white-space: pre-wrap;
}

JavaScript

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`;
}

Result

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

Specifications

Specification
XMLHttpRequest Standard # dom-formdata

Browser compatibility

BCD tables only load in the browser