unslug fr: move

1 files changed, 440 insertions, 0 deletions

diff --git a/files/fr/learn/forms/sending_forms_through_javascript/index.html b/files/fr/learn/forms/sending_forms_through_javascript/index.html
new file mode 100644
index 0000000000..922bfb2aaf
--- /dev/null
+++ b/files/fr/learn/forms/sending_forms_through_javascript/index.html
@@ -0,0 +1,440 @@
+---
+title: Envoi de formulaires avec JavaScript
+slug: Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript
+translation_of: Learn/Forms/Sending_forms_through_JavaScript
+---
+<div>{{LearnSidebar}}{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p class="summary">Comme dans le <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">précédent article</a>, les formulaires HTML peuvent envoyer une requête HTTP par déclaration. Mais des formulaires peuvent aussi préparer une requête HTTP à adresser via JavaScript. Cet article explore comment faire cela.</p>
+
+<h2 id="Un_formulaire_n'est_pas_toujours_un_&lt;form>">Un formulaire n'est pas toujours un &lt;form&gt;</h2>
+
+<p>Avec les <a href="/fr/docs/Open_Web_apps_and_Web_standards">applications Web ouvertes</a>, il est de plus en plus courant d'utiliser des <a href="fr/docs/HTML/Forms">formulaires HTML</a> autres que des formulaires à remplir par des personnes — de plus en plus de développeurs prennent le contrôle sur la transmission des données.</p>
+
+<h3 id="Obtenir_le_contrôle_sur_la_totalité_de_l'interface">Obtenir le contrôle sur la totalité de l'interface</h3>
+
+<p>La soumission d'un formulaire HTML standard charge l'URL où les données sont envoyées, car la fenêtre du navigateur manipule une pleine page. Éviter de charger une pleine page peut amener plus de fluidité en masquant des clignotements et des lenteurs de réseau.</p>
+
+<p>De nombreuses UI modernes n'utilisent les formulaires HTML que pour recueillir des données utilisateur. Lorsque l'utilisateur veut envoyer les données, l'application prend la main et transmet les données de manière asynchrone en arrière-plan, mettant à jour uniquement les parties de l'interface utilisateur nécessitant des modifications.</p>
+
+<p>L'envoi asynchrone de données arbitraires est connu sous le nom AJAX, qui signifie "Asynchronous JavaScript And XML" (XML et JavaScript asynchrones).</p>
+
+<h3 id="Comment_est-ce_différent">Comment est-ce différent ?</h3>
+
+<p><a href="/en-US/docs/AJAX">AJAX</a> utilise l'objet DOM {{domxref("XMLHttpRequest")}} (XHR).Il peut construire des requêtes HTTP, les envoyer et retrouver leur résultats.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Les techniques AJAX anciennes ne se fondaient pas forcément sur {{domxref("XMLHttpRequest")}}. Par exemple, <a href="http://en.wikipedia.org/wiki/JSONP" rel="external">JSONP</a> combiné à la fonction <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/eval"><code>eval()</code></a>. Cela fonctionne, mais n'est pas recommandé en raison de sérieux problèmes de sécurité. La seule raison d'en poursuivre l'utilisation est l'utilisation de navigateurs anciens qui ne prennent pas en charge {{domxref("XMLHttpRequest")}} ou <a href="/fr/docs/Glossaire/JSON">JSON</a>, mais ce sont vraiment des navigateurs anciens ! <strong>Évitez ces techniques.</strong></p>
+</div>
+
+<p> </p>
+
+<p>Historiquement, {{domxref("XMLHttpRequest")}} a été conçu pour récupérer et envoyer du XML comme format d'échange. Cependant,<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/JSON"> JSON</a> a remplacé XML et est de plus en plus courant aujourd'hui.</p>
+
+<p>Mais ni XML ni JSON ne s'adaptent à l'encodage des demandes de données de formulaire. Les données de formulaire (<code>application/x-www-form-urlencoded</code>) sont constituées de listes de paires clé/valeur codées par URL. Pour la transmission de données binaires, la requête HTTP est transformée en données <code>multipart/form‑data</code>.</p>
+
+<p>Si vous contrôlez le frontal (le code exécuté dans le navigateur) et l'arrière‑plan (le code exécuté sur le serveur), vous pouvez envoyer JSON/XML et les traiter comme vous le souhaitez.</p>
+
+<p>Mais si vous voulez utiliser un service tiers, ce n'est pas si facile. Certains services n'acceptent que les données de formulaire. Il y a aussi des cas où il est plus simple d'utiliser les données du formulaire. Si les données sont des paires clé/valeur ou des données binaires brutes, des outils d'arrière‑plan existants peuvent les traiter sans code supplémentaire.</p>
+
+<p>Comment envoyer de telles données ?</p>
+
+<h2 id="Envoi_des_données_de_formulaire">Envoi des données de formulaire</h2>
+
+<p>Il y a 3 façons d'envoyer des données de formulaire, allant des techniques existantes jusqu'à l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} plus récent. Examinons-les en détail.</p>
+
+<h3 id="Construire_manuellement_un_XMLHttpRequest">Construire manuellement un XMLHttpRequest</h3>
+
+<p>{{domxref("XMLHttpRequest")}} est la manière la plus sûre et la plus fiable de faire des requêtes HTTP. Pour envoyer des données de formulaire avec {{domxref("XMLHttpRequest")}}, préparez les données par encodage URL et suivez les spécificités des requêtes de données de formulaire.</p>
+
+<div class="note">
+<p><strong>Note :</strong> Pour en savoir plus sur <code>XMLHttpRequest</code>, ces articles pourraient vous intéresser : un article d'introduction à <a href="/fr/docs/Web/Guide/AJAX/Premiers_pas">AJAX</a> et un didacticiel plus fouillé à ce propos utilisant <a href="/fr/docs/HTML_in_XMLHttpRequest"><code>XMLHttpRequest</code></a>.</p>
+</div>
+
+<p>Reconstruisons l'exemple précédent :</p>
+
+<pre class="brush: html">&lt;button type="button" onclick="sendData({test:'ok'})"&gt;Cliquez ici !&lt;/button&gt;</pre>
+
+<p>Comme vous pouvez le voir, le HTML n'a pas réellement changé. Mais, le JavaScript est totalement différent :</p>
+
+<pre class="brush: js">function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var urlEncodedData = "";
+  var urlEncodedDataPairs = [];
+  var name;
+
+  // Transformez l'objet data en un tableau de paires clé/valeur codées URL.
+  for(name in data) {
+    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
+  }
+
+  // Combinez les paires en une seule chaîne de caractères et remplacez tous
+  // les espaces codés en % par le caractère'+' ; cela correspond au comportement
+  // des soumissions de formulaires de navigateur.
+  urlEncodedData = urlEncodedDataPairs.join('&amp;').replace(/%20/g, '+');
+
+  // Définissez ce qui se passe en cas de succès de soumission de données
+  XHR.addEventListener('load', function(event) {
+    alert('Ouais ! Données envoyées et réponse chargée.');
+  });
+
+  // Définissez ce qui arrive en cas d'erreur
+  XHR.addEventListener('error', function(event) {
+    alert('Oups! Quelque chose s\'est mal passé.');
+  });
+
+  // Configurez la requête
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // Ajoutez l'en-tête HTTP requise pour requêtes POST de données de formulaire
+  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+
+  // Finalement, envoyez les données.
+  XHR.send(urlEncodedData);
+}</pre>
+
+<p>Voici le résultat en direct :</p>
+
+<p>{{EmbedLiveSample("Construire_manuellement_un_XMLHttpRequest", "100%", 50)}}</p>
+
+<div class="note">
+<p><strong>Note :</strong> Cette utilisation de {{domxref("XMLHttpRequest")}} est assujettie à la politique « même origine » si vous voulez envoyer des données à un site web tiers. Pour les demandes d'origine croisée, vous aurez besoin d'un contrôle d'accès <a href="/fr/docs/HTTP/Access_control_CORS">CORS et HTTP</a>.</p>
+</div>
+
+<h3 id="Utilisation_de_XMLHttpRequest_et_de_l'objet_FormData">Utilisation de XMLHttpRequest et de l'objet FormData</h3>
+
+<p>Construire manuellement une requête HTTP peut devenir fastidieux. Heureusement, une <a href="http://www.w3.org/TR/XMLHttpRequest/">spécification XMLHttpRequest</a> récente fournit un moyen pratique et plus simple pour traiter les demandes de données de formulaire avec l'objet {{domxref("XMLHttpRequest/FormData", "FormData")}}.</p>
+
+<p>L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} peut s'utiliser pour construire des données de formulaire pour la transmission ou pour obtenir les données des élément de formulaire de façon à gérer leur mode d'envoi. Notez que les objets {{domxref("XMLHttpRequest/FormData", "FormData")}} sont en écriture seule (« write only »), ce qui signifie que vous pouvez les modifier, mais pas récupérer leur contenu.</p>
+
+<p>L'utilisation de cet objet est détaillée dans <a href="/fr/docs/Web/API/FormData/Utilisation_objets_FormData">Utiliser les objets FormData</a>, mais voici deux exemples :</p>
+
+<h4 id="Utiliser_un_objet_FormData_autonome">Utiliser un objet FormData autonome</h4>
+
+<pre class="brush: html">&lt;button type="button" onclick="sendData({test:'ok'})"&gt;Cliquez ici !&lt;/button&gt;</pre>
+
+<p>Vous devriez être familier de cet exemple HTML.</p>
+
+<pre class="brush: js">function sendData(data) {
+  var XHR = new XMLHttpRequest();
+  var FD  = new FormData();
+
+  // Mettez les données dans l'objet FormData
+  for(name in data) {
+    FD.append(name, data[name]);
+  }
+
+  // Définissez ce qui se passe si la soumission s'est opérée avec succès
+  XHR.addEventListener('load', function(event) {
+    alert('Ouais ! Données envoyées et réponse chargée.');
+  });
+
+  // Definissez ce qui se passe en cas d'erreur
+  XHR.addEventListener('error', function(event) {
+    alert('Oups! Quelque chose s\'est mal passé.');
+  });
+
+  // Configurez la requête
+  XHR.open('POST', 'https://example.com/cors.php');
+
+  // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies
+  XHR.send(FD);
+}</pre>
+
+<p>Voici le résultat directement :</p>
+
+<p>{{EmbedLiveSample("Utiliser_un_objet_FormData_autonome", "100%", 60)}}</p>
+
+<h4 id="Utiliser_un_objet_FormData_lié_à_un_élément_form">Utiliser un objet FormData lié à un élément form</h4>
+
+<p>Vous pouvez également lier un objet <code>FormData</code> à un élément {{HTMLElement("form")}} et  créer ainsi un <code>FormData</code> représentant les données contenues dans le formulaire.</p>
+
+<p>Le HTML est classique :</p>
+
+<pre class="brush: html">&lt;form id="myForm"&gt;
+  &lt;label for="myName"&gt;Dites-moi votre nom :&lt;/label&gt;
+  &lt;input id="myName" name="name" value="John"&gt;
+  &lt;input type="submit" value="Envoyer !"&gt;
+&lt;/form&gt;</pre>
+
+<p>Mais JavaScript sera de la forme :</p>
+
+<pre class="brush: js">window.addEventListener("load", function () {
+  function sendData() {
+    var XHR = new XMLHttpRequest();
+
+    // Liez l'objet FormData et l'élément form
+    var FD = new FormData(form);
+
+    // Définissez ce qui se passe si la soumission s'est opérée avec succès
+    XHR.addEventListener("load", function(event) {
+      alert(event.target.responseText);
+    });
+
+    // Definissez ce qui se passe en cas d'erreur
+    XHR.addEventListener("error", function(event) {
+      alert('Oups! Quelque chose s\'est mal passé.');
+    });
+
+    // Configurez la requête
+    XHR.open("POST", "https://example.com/cors.php");
+
+    // Les données envoyées sont ce que l'utilisateur a mis dans le formulaire
+    XHR.send(FD);
+  }
+
+  // Accédez à l'élément form …
+  var form = document.getElementById("myForm");
+
+  // … et prenez en charge l'événement submit.
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+
+    sendData();
+  });
+});</pre>
+
+<p>Voici le résultat en direct :</p>
+
+<p>{{EmbedLiveSample("Utiliser_un_objet_FormData_lié_à_un_élément_form", "100%", 70)}}</p>
+
+<p>Vous pouvez même intervenir davantage dans le processus en utilisant la propriété {{domxref("HTMLFormElement.elements", "elements")}} du formulaire pour obtenir une liste de tous les éléments de données du formulaire et les gérer chacun individuellement dans le programme. Pour en savoir plus, voir l'exemple dans la {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.</p>
+
+<h3 id="Construire_un_DOM_dans_un_iframe_caché">Construire un DOM dans un <code>iframe</code> caché</h3>
+
+<p>La plus ancienne façon d'expédier des données de formulaire de manière asynchrone consiste à construire un formulaire avec l'API DOM, puis d'envoyer ses données dans un {{HTMLElement("iframe")}} caché. Pour accéder au résultat de votre envoi, il suffit de récupérer le contenu de l'élément {{HTMLElement("iframe")}}.</p>
+
+<div class="warning">
+<p><strong>Avertissement :</strong> <strong>Évitez d'employer cette technique.</strong> Il y a des risques concernant la sécurité avec des services tierce-partie car vous laissez ouverte la possibilité d'une <a href="https://fr.wikipedia.org/wiki/Cross-site_scripting" rel="external">attaque par injection de script</a>. Si vous utilisez HTTPS, il reste possible de perturber la <a href="/fr/docs/JavaScript/Same_origin_policy_for_JavaScript">politique de la même origine</a>, ce qui peut rendre le contenu de l'élément {{HTMLElement("iframe")}} inatteignable. Toutefois, cette méthode peut être votre seule possibilité si vous devez prendre en charge des navigateurs très anciens.</p>
+</div>
+
+<p>Voici un exemple :</p>
+
+<pre class="brush: html">&lt;button onclick="sendData({test:'ok'})"&gt;Cliquez ici !&lt;/button&gt;</pre>
+
+<pre class="brush: js">// Créer l'iFrame servant à envoyer les données
+var iframe = document.createElement("iframe");
+iframe.name = "myTarget";
+
+// Puis, attachez l'iFrame au document principal
+window.addEventListener("load", function () {
+  iframe.style.display = "none";
+  document.body.appendChild(iframe);
+});
+
+// Voici la fonction réellement utilisée pour expédier les données
+// Elle prend un paramètre, qui est un objet chargé des paires clé/valeurs.
+function sendData(data) {
+  var name,
+      form = document.createElement("form"),
+      node = document.createElement("input");
+
+  // Définir ce qui se passe quand la réponse est chargée
+  iframe.addEventListener("load", function () {
+    alert("Ouais ! Données envoyés.");
+  });
+
+  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
+  form.target = iframe.name;
+
+  for(name in data) {
+    node.name  = name;
+    node.value = data[name].toString();
+    form.appendChild(node.cloneNode());
+  }
+
+  // Pour être envoyé, le formulaire nécessite d'être attaché au document principal.
+  form.style.display = "none";
+  document.body.appendChild(form);
+
+  form.submit();
+
+  // Une fois le formulaire envoyé, le supprimer.
+  document.body.removeChild(form);
+}</pre>
+
+<p>Voici le résultat en direct :</p>
+
+<p>{{EmbedLiveSample('Construire_un_DOM_dans_un_iframe_caché', "100%", 50)}}</p>
+
+<p> </p>
+
+<h2 id="Gestion_des_données_binaires"><span>Gestion des données binaires</span></h2>
+
+<p>Si vous utilisez un objet {{domxref("XMLHttpRequest/FormData", "FormData")}} avec un formulaire qui inclut des widgets <code>&lt;input type="file"&gt;</code>, les données seront traitées automatiquement. Mais pour envoyer des données binaires à la main, il y a un travail supplémentaire à faire.</p>
+
+<p>Il existe de nombreuses sources de données binaires sur le Web moderne : {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement", "Canvas")}} et <a href="/fr/docs/WebRTC/navigator.getUserMedia">WebRTC</a>, par exemple. Malheureusement, certains anciens navigateurs ne peuvent pas accéder aux données binaires ou nécessitent des solutions de contournement compliquées. Ces cas hérités sont hors du champ d'application de cet article. Si vous voulez en savoir plus sur l'API FileReader, lisez <a href="/fr/docs/Using_files_from_web_applications">Utiliser les fichiers des applications Web</a>.</p>
+
+<p>Envoyer des données binaires avec le support de {{domxref("XMLHttpRequest/FormData", "FormData")}} est direct. Utilisez la méthode append() et vous avez terminé. Si vous devez le faire à la main, c'est plus délicat.</p>
+
+<p>Dans l'exemple suivant, nous utilisons l'API {{domxref("FileReader")}} pour accéder aux données binaires et ensuite nous construisons à la main la demande de données du formulaire en plusieurs parties :</p>
+
+<pre class="brush: html">&lt;form id="myForm"&gt;
+  &lt;p&gt;
+    &lt;label for="i1"&gt;Données textuelles :&lt;/label&gt;
+    &lt;input id="i1" name="myText" value="Quelques données textuelles"&gt;
+  &lt;/p&gt;
+  &lt;p&gt;
+    &lt;label for="i2"&gt;Fichier de données :&lt;/label&gt;
+    &lt;input id="i2" name="myFile" type="file"&gt;
+  &lt;/p&gt;
+  &lt;button&gt;Envoyer !&lt;/button&gt;
+&lt;/form&gt;</pre>
+
+<p>Comme vous pouvez le voir, le HTML est un <code>&lt;form&gt;</code>standard. Il n'y a rien de magique là‑dedans. La « magie » est dans le JavaScript :</p>
+
+<pre class="brush: js">// Comme nous voulons avoir accès à un nœud DOM,
+// nous initialisons le script au chargement de la page.
+window.addEventListener('load', function () {
+
+  // Ces variables s'utilisent pour stocker les données du formulaire
+  var text = document.getElementById("i1");
+  var file = {
+        dom    : document.getElementById("i2"),
+        binary : null
+      };
+
+  // Nous utilisons l'API de FileReader pour accéder au contenu du fichier
+  var reader = new FileReader();
+
+  // Comme FileReader est asynchrone, stockons son résulata
+  // quand il a fini de lire le fichier
+  reader.addEventListener("load", function () {
+    file.binary = reader.result;
+  });
+
+  // Au chargement de la page, si un fichier est déjà choisi, lisons‑le
+  if(file.dom.files[0]) {
+    reader.readAsBinaryString(file.dom.files[0]);
+  }
+
+  // Sinon, lisons le fichier une fois que l'utilisateur l'a sélectionné
+  file.dom.addEventListener("change", function () {
+    if(reader.readyState === FileReader.LOADING) {
+      reader.abort();
+    }
+
+    reader.readAsBinaryString(file.dom.files[0]);
+  });
+
+  // sendData est notre fonction principale
+  function sendData() {
+    // S'il y a un fichier sélectionné, attendre sa lecture
+    // Sinon, retarder l'exécution de la fonction
+    if(!file.binary &amp;&amp; file.dom.files.length &gt; 0) {
+      setTimeout(sendData, 10);
+      return;
+    }
+
+    // Pour construire notre requête de données de formulaire en plusieurs parties
+    // nous avons besoin d'une instance de XMLHttpRequest
+    var XHR = new XMLHttpRequest();
+
+    // Nous avons besoin d'un séparateur pour définir chaque partie de la requête
+    var boundary = "blob";
+
+    // Stockons le corps de la requête dans une chaîne littérale
+    var data = "";
+
+    // Ainsi, si l'utilisateur a sélectionné un fichier
+    if (file.dom.files[0]) {
+      // Lancer une nouvelle partie de la requête du corps
+      data += "--" + boundary + "\r\n";
+
+      // Décrivons là comme étant des données du formulaire
+      data += 'content-disposition: form-data; '
+      // Définissons le nom des données du formulaire
+            + 'name="'         + file.dom.name          + '"; '
+      // Fournissons le vrai nom du fichier
+            + 'filename="'     + file.dom.files[0].name + '"\r\n';
+      // et le type MIME du fichier
+      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';
+
+      // Il y a une ligne vide entre les métadonnées et les données
+      data += '\r\n';
+
+      // Ajoutons les données binaires à la requête du corps
+      data += file.binary + '\r\n';
+    }
+
+    // C'est plus simple pour les données textuelles
+    // Démarrons une nouvelle partie dans notre requête du corps
+    data += "--" + boundary + "\r\n";
+
+    // Disons que ce sont des données de formulaire et nommons les
+    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
+    // Il y a une ligne vide entre les métadonnées et les données
+    data += '\r\n';
+
+    // Ajoutons les données textuelles à la requête du corps
+    data += text.value + "\r\n";
+
+    // Ceci fait, "fermons" la requête du corps
+    data += "--" + boundary + "--";
+
+    // Définissons ce qui arrive en cas de succès pour la soumission des données
+    XHR.addEventListener('load', function(event) {
+      alert('Ouais ! Données expédiées et réponse chargée.');
+    });
+
+    // Définissons ce qui se passe en cas d'eerreur
+    XHR.addEventListener('error', function(event) {
+      alert('Oups! Quelque chose s\'est mal passé.');
+    });
+
+    // Configurons la requête
+    XHR.open('POST', 'https://example.com/cors.php');
+
+    // Ajoutons l'en-tête requise pour gèrer la requête POST des données
+    // de formulaire en plusieurs parties
+    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);
+
+    // et finalement, expédions les données.
+    XHR.send(data);
+  }
+
+  // Accéder au formulaire …
+  var form = document.getElementById("myForm");
+
+  // … pour prendre en charge l'événement soumission
+  form.addEventListener('submit', function (event) {
+    event.preventDefault();
+    sendData();
+  });
+});</pre>
+
+<p>Voici le résultat en direct :</p>
+
+<p>{{EmbedLiveSample('Gestion_des_données_binaires', "100%", 150)}}</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>Selon le navigateur, l'envoi de données de formulaire par JavaScript peut être facile ou difficile. L'objet {{domxref("XMLHttpRequest/FormData", "FormData")}} en est généralement la cause et n'hésitez pas à utiliser un « polyfill » (<a href="https://fr.wikipedia.org/wiki/Polyfill">prothèse d'émulation</a>) pour cela sur les navigateurs anciens :</p>
+
+<ul>
+ <li><a href="https://gist.github.com/3120320" rel="external">Ces primitives</a> sont des « polyfills » de  <code>FormData</code> avec des {{domxref("Using_web_workers","worker")}}.</li>
+ <li><a href="https://github.com/francois2metz/html5-formdata" rel="external">HTML5-formdata</a> tente d'opérer un « polyfill » de l'objet <code>FormData</code>, mais il requiert un <a href="http://www.w3.org/TR/FileAPI/" rel="external">File API</a></li>
+ <li><a href="https://github.com/jimmywarting/FormData">Ce « polyfill »</a> fournit la plupart des nouvelles méthodes dont <code>FormData</code> dispose (entrées, clés, valeurs et prise en charge de <code>for...of</code>)</li>
+</ul>
+
+<p> </p>
+
+<div>{{PreviousMenuNext("Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés", "Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers", "Web/Guide/HTML/Formulaires")}}</div>
+
+<p> </p>
+
+<h2 id="Dans_ce_module">Dans ce module</h2>
+
+<ul>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Mon premier formulaire HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML"><span>Comment structurer un formulaire HTML</span></a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs">Les widgets natifs pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoi des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire">Validation des données de formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_construire_des_widgets_de_formulaires_personnalisés">Comment construire des widgets personnalisés pour formulaire</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Sending_forms_through_JavaScript">Envoi de formulaires à l'aide du JavaScript</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/HTML_forms_in_legacy_browsers">Formulaires HTML dans les navigateurs anciens</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Apparence_des_formulaires_HTML">Mise en forme des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Advanced_styling_for_HTML_forms">Mise en forme avancée des formulaires HTML</a></li>
+ <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Property_compatibility_table_for_form_widgets">Table de compatibilité des propriétés pour les widgets de formulaire</a></li>
+</ul>