JavaScript Academy · Leçon

L’objet FormData

Créez des charges utiles multipart à partir de formulaires.

L’objet FormData est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Qu’est-ce que FormData ?

FormData est une API de navigateur qui permet de construire un ensemble de paires clé/valeur représentant les champs d’un formulaire et leurs valeurs. C’est la manière standard de regrouper des données, notamment des fichiers, pour les envoyer à un serveur.

Les données sont encodées au format multipart/form-data, qui prend en charge les téléversements binaires.

Créer un FormData vide

Construisez un FormData vide et ajoutez les champs un par un avec append.

const data = new FormData();
data.append('username', 'ada');
data.append('email', 'ada@example.com');

console.log(data.get('username'));

Construire à partir d’un élément de formulaire

Passez un élément <form> au constructeur : chaque champ de saisie nommé est alors capturé automatiquement. C’est l’utilisation la plus courante.

const form = document.querySelector('#signup');
const data = new FormData(form);

for (const [key, value] of data.entries()) {
  console.log(key, value);
}

append ou set

append ajoute une valeur même si la clé existe déjà, ce qui permet d’avoir plusieurs valeurs pour une même clé. set remplace toutes les valeurs existantes pour cette clé.

const data = new FormData();
data.append('tag', 'a');
data.append('tag', 'b');
console.log(data.getAll('tag'));

data.set('tag', 'only');
console.log(data.getAll('tag'));

Lire les valeurs

get renvoie la première valeur associée à une clé, getAll renvoie toutes les valeurs sous forme de tableau et has vérifie l’existence de la clé.

const data = new FormData();
data.append('color', 'red');
data.append('color', 'blue');

console.log(data.get('color'));
console.log(data.getAll('color'));
console.log(data.has('color'));

Supprimer des champs

delete supprime toutes les valeurs associées à une clé. C’est utile pour retirer des champs avant l’envoi.

const data = new FormData();
data.append('keep', '1');
data.append('remove', '2');

data.delete('remove');
console.log(data.has('remove'));
console.log(data.has('keep'));

Parcourir les entrées

FormData peut être parcouru. Utilisez entries, keys ou values, ou encore une boucle for...of, pour parcourir toutes les paires.

const data = new FormData();
data.append('a', '1');
data.append('b', '2');

for (const key of data.keys()) {
  console.log('field: ' + key);
}

Ajouter des fichiers

append peut recevoir un File ou un Blob comme valeur. Un troisième argument facultatif définit le nom de fichier envoyé au serveur.

const fileInput = document.querySelector('#avatar');
const data = new FormData();
data.append('avatar', fileInput.files[0], 'profile.png');

console.log(data.get('avatar').name);

Pourquoi utiliser multipart/form-data

FormData est sérialisé au format multipart/form-data, qui peut transporter à la fois des champs textuels et le contenu binaire de fichiers dans le corps d’une même requête. C’est pourquoi ce format est privilégié pour les téléversements de fichiers.

const data = new FormData();
data.append('title', 'Vacation Photo');
data.append('photo', new Blob(['binary'], { type: 'image/png' }), 'pic.png');

console.log(data.has('photo'));

Convertir en objet

Pour les formulaires contenant uniquement du texte, Object.fromEntries peut transformer FormData en objet simple. Notez que cette conversion ne conserve qu’une seule valeur pour chaque clé répétée.

const form = document.querySelector('#login');
const data = new FormData(form);
const plain = Object.fromEntries(data.entries());

console.log(plain);

Pourquoi FormData est important

FormData fait le lien entre les formulaires HTML et les requêtes réseau. Il regroupe les champs et les fichiers, accepte les clés répétées et encode les données binaires de manière sûre. Ensuite, vous lirez le contenu des fichiers avec FileReader, puis vous enverrez FormData avec fetch.

const form = document.querySelector('#contact');
const data = new FormData(form);
data.append('source', 'web');

console.log([...data.keys()]);

Vérification rapide

Quelle est la différence entre append et set sur un FormData ?

Récapitulatif : l’objet FormData

Vous avez appris à regrouper les données d’un formulaire :

new FormData(form) capture automatiquement les champs de saisie nommés.
append autorise les clés répétées ; set les remplace.
Lisez les données avec get, getAll et has ; parcourez-les avec entries.
Les données sont encodées au format multipart/form-data, qui prend en charge les fichiers et les données binaires.

Questions Fréquemment Posées

La leçon « L’objet FormData » est-elle gratuite ?

Oui — le texte complet de « L’objet FormData » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « L’objet FormData » ?

Créez des charges utiles multipart à partir de formulaires. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « L’objet FormData » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy