| title | FormData |
|---|---|
| slug | Web/API/FormData |
| page-type | web-api-interface |
| browser-compat | api.FormData |
{{APIRef("XMLHttpRequest API")}} {{AvailableInWorkers}}
The FormData interface provides a way to construct a set of key/value pairs representing form fields and their values, which can be sent using the {{domxref("Window/fetch", "fetch()")}}, {{domxref("XMLHttpRequest.send()")}} or {{domxref("navigator.sendBeacon()")}} methods. It uses the same format a form would use if the encoding type were set to "multipart/form-data".
You can also pass it directly to the {{domxref("URLSearchParams")}} constructor if you want to generate query parameters in the way a {{HTMLElement("form")}} would do if it were using simple GET submission.
An object implementing FormData can directly be used in a {{jsxref("Statements/for...of", "for...of")}} structure, instead of {{domxref('FormData.entries()', 'entries()')}}: for (const p of myFormData) is equivalent to for (const p of myFormData.entries()).
- {{domxref("FormData.FormData","FormData()")}}
- : Creates a new
FormDataobject.
- : Creates a new
- {{domxref("FormData.append()")}}
- : Appends a new value onto an existing key inside a
FormDataobject, or adds the key if it does not already exist.
- : Appends a new value onto an existing key inside a
- {{domxref("FormData.delete()")}}
- : Deletes a key/value pair from a
FormDataobject.
- : Deletes a key/value pair from a
- {{domxref("FormData.entries()")}}
- : Returns an iterator that iterates through all key/value pairs contained in the
FormData.
- : Returns an iterator that iterates through all key/value pairs contained in the
- {{domxref("FormData.get()")}}
- : Returns the first value associated with a given key from within a
FormDataobject.
- : Returns the first value associated with a given key from within a
- {{domxref("FormData.getAll()")}}
- : Returns an array of all the values associated with a given key from within a
FormData.
- : Returns an array of all the values associated with a given key from within a
- {{domxref("FormData.has()")}}
- : Returns whether a
FormDataobject contains a certain key.
- : Returns whether a
- {{domxref("FormData.keys()")}}
- : Returns an iterator iterates through all keys of the key/value pairs contained in the
FormData.
- : Returns an iterator iterates through all keys of the key/value pairs contained in the
- {{domxref("FormData.set()")}}
- : Sets a new value for an existing key inside a
FormDataobject, or adds the key/value if it does not already exist.
- : Sets a new value for an existing key inside a
- {{domxref("FormData.values()")}}
- : Returns an iterator that iterates through all values contained in the
FormData.
- : Returns an iterator that iterates through all values contained in the
{{Specifications}}
{{Compat}}
- Using FormData objects
- {{HTMLElement("Form")}}
