FormData : constructeur FormData()

Baseline

Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Note : Cette fonctionnalité est disponible via les Web Workers.

Le constructeur FormData() crée un nouvel objet FormData.

Syntaxe

new FormData()
new FormData(form)
new FormData(form, submitter)

Paramètres

form Facultatif: Un élément HTML <form> — quand il est défini, l'objet FormData est rempli avec les clés/valeurs actuelles du form en utilisant la propriété name de chaque élément pour les clés et leur valeur envoyée pour les valeurs. Il encode également le contenu des fichiers. Un évènement formdata est déclenché sur le formulaire lorsque l'objet FormData est créé, permettant au formulaire de modifier les données du formulaire si nécessaire.
submitter Facultatif: Avec bouton d'envoi qui est un membre du form. Si le submitter a un attribut name ou est un <input type="image">, ses données sont incluses dans l'objet FormData (par exemple, btnName=btnValue).

Exemples

Créer un `FormData` vide

La ligne suivante crée un objet FormData vide :

const formData = new FormData();

Vous pouvez ajouter un couple clé/valeur en utilisant append() :

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

Pré-remplir à partir d'un élément HTML `form`

Vous pouvez définir les arguments optionnels form et submitter lors de la création de l'objet FormData, afin de le pré-remplir avec les valeurs provenant du formulaire défini.

Note : Seuls les contrôles de formulaire réussis sont inclus dans un objet FormData, c'est-à-dire ceux qui ont un nom et qui ne sont pas dans un état désactivé.

HTML

html

<form id="form">
  <input type="text" name="texte1" value="toto" />
  <input type="text" name="texte2" value="tata" />
  <input type="text" name="texte3" value="truc" />
  <input type="checkbox" name="verification" checked disabled />
  <button name="intention" value="sauvegarde">Sauvegarder</button>
  <button name="intention" value="sauvegardeCommeCopie">
    Sauvegarder comme copie
  </button>
</form>

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

form {
  display: none;
}

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

JavaScript

const form = document.getElementById("form");
const btnEnvoi = document.querySelector("button[value=sauvegarde]");
const formData = new FormData(form, btnEnvoi);

const sortie = document.getElementById("sortie");

for (const [cle, valeur] of formData) {
  sortie.textContent += `${cle}: ${valeur}\n`;
}

Résultat

Pour plus de concision, l'élément <form> est masqué.

Spécifications

Spécification
XMLHttpRequest # dom-formdata

Compatibilité des navigateurs

Voir aussi

Utiliser des objets FormData
L'élément HTML <form>

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 28 août 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu