{"id":5331,"date":"2024-08-27T15:53:51","date_gmt":"2024-08-27T15:53:51","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/formulaires-html-guide-pratique\/"},"modified":"2024-08-27T15:53:54","modified_gmt":"2024-08-27T15:53:54","slug":"formulaires-html-guide-pratique","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/formulaires-html-guide-pratique\/","title":{"rendered":"2.13 Les Formulaires en HTML : Guide Pratique"},"content":{"rendered":"\u00ab\u00a0`html\n\n<p><strong>Les Formulaires en HTML<\/strong> sont essentiels pour interagir avec les utilisateurs dans les applications web. Comprendre comment cr\u00e9er et utiliser efficacement des <strong>formulaires en HTML<\/strong> peut consid\u00e9rablement am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur et la fonctionnalit\u00e9 de votre site web. Plongeons dans ce guide pratique pour d\u00e9couvrir comment construire des formulaires HTML et utiliser leurs diff\u00e9rentes fonctionnalit\u00e9s.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction aux <strong>Formulaires en HTML<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586254849?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-speciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>Les formulaires en HTML permettent aux utilisateurs de soumettre des donn\u00e9es \u00e0 un serveur. Ces donn\u00e9es peuvent \u00eatre de diff\u00e9rents types : texte, chiffres, fichiers, etc. Les \u00e9l\u00e9ments de formulaire comme les <code>&lt;input&gt;<\/code>, <code>&lt;textarea&gt;<\/code>, et <code>&lt;select&gt;<\/code> sont utilis\u00e9s pour collecter les informations. Apprenons \u00e0 constituer un formulaire \u00e9tape par \u00e9tape et voyons comment chaque \u00e9l\u00e9ment fonctionne.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form action=\"\/submit\" method=\"post\"&gt;\n  &lt;label for=\"name\"&gt;Nom :&lt;\/label&gt;\n  &lt;input type=\"text\" id=\"name\" name=\"name\"&gt;\n  \n  &lt;label for=\"email\"&gt;Email :&lt;\/label&gt;\n  &lt;input type=\"email\" id=\"email\" name=\"email\"&gt;\n  \n  &lt;input type=\"submit\" value=\"Envoyer\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Les Champs de Formulaire de Base<\/h2>\n\n\n\n<p>Les principaux \u00e9l\u00e9ments d\u2019un formulaire HTML incluent les champs de texte, les s\u00e9lections, les boutons, et plus encore. Voici comment ils fonctionnent et comment les utiliser efficacement. Pour en savoir plus sur les diff\u00e9rentes balises, visitez notre <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\">guide du fonctionnement des navigateurs web<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Champs de Texte<\/h3>\n\n\n\n<p>Les champs de texte permettent aux utilisateurs de saisir des donn\u00e9es textuelles. Ils peuvent \u00eatre configur\u00e9s pour accepter des mots de passe, des adresses email, et des textes longs gr\u00e2ce aux attributs types et aux balises <code>&lt;input&gt;<\/code> et <code>&lt;textarea&gt;<\/code>. Pour en savoir plus sur la syntaxe HTML, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/bases-langage-html-apprendre-fondamentaux\">article sur les bases du langage HTML<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Champ de texte --&gt;\n&lt;label for=\"username\"&gt;Nom d'utilisateur:&lt;\/label&gt;\n&lt;input type=\"text\" id=\"username\" name=\"username\"&gt;\n\n&lt;!-- Champ de mot de passe --&gt;\n&lt;label for=\"password\"&gt;Mot de passe:&lt;\/label&gt;\n&lt;input type=\"password\" id=\"password\" name=\"password\"&gt;\n\n&lt;!-- Champ de texte longue --&gt;\n&lt;label for=\"about\"&gt;\u00c0 propos de vous:&lt;\/label&gt;\n&lt;textarea id=\"about\" name=\"about\"&gt;&lt;\/textarea&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Champs Num\u00e9riques et S\u00e9lections<\/h3>\n\n\n\n<p>Les champs num\u00e9riques et de s\u00e9lection permettent aux utilisateurs de choisir parmi des options ou de saisir des valeurs num\u00e9riques. D\u00e9couvrez comment cr\u00e9er votre premi\u00e8re page web en HTML dans notre <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\">tutoriel facile<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Champ de nombre --&gt;\n&lt;label for=\"age\"&gt;\u00c2ge:&lt;\/label&gt;\n&lt;input type=\"number\" id=\"age\" name=\"age\" min=\"1\" max=\"100\"&gt;\n\n&lt;!-- S\u00e9lection --&gt;\n&lt;label for=\"country\"&gt;Pays:&lt;\/label&gt;\n&lt;select id=\"country\" name=\"country\"&gt;\n  &lt;option value=\"france\"&gt;France&lt;\/option&gt;\n  &lt;option value=\"usa\"&gt;USA&lt;\/option&gt;\n  &lt;option value=\"canada\"&gt;Canada&lt;\/option&gt;\n&lt;\/select&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Boutons<\/h3>\n\n\n\n<p>Les boutons sont utilis\u00e9s pour soumettre ou r\u00e9initialiser les formulaires. Pour comprendre comment les styles CSS peuvent am\u00e9liorer vos formulaires, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/rediger-css-pages-html-guide\">guide sur la r\u00e9daction CSS<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!-- Bouton de soumission --&gt;\n&lt;input type=\"submit\" value=\"Envoyer\"&gt;\n\n&lt;!-- Bouton de r\u00e9initialisation --&gt;\n&lt;input type=\"reset\" value=\"R\u00e9initialiser\"&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Validation et Soumission de Formulaires<\/h2>\n\n\n\n<p>La validation des formulaires est essentielle pour garantir que les utilisateurs fournissent des donn\u00e9es conformes avant la soumission. HTML5 offre plusieurs attributs int\u00e9gr\u00e9s comme <code>required<\/code>, <code>pattern<\/code> et <code>minlength<\/code> pour faciliter cette validation. Pour plus de d\u00e9tails sur la validation de code, visitez notre <a href=\"https:\/\/wikiform.fr\/codespace\/validation-code-html-w3c-tutoriel\">tutoriel sur la validation de code HTML<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;form action=\"\/submit\" method=\"post\"&gt;\n  &lt;label for=\"email\"&gt;Email :&lt;\/label&gt;\n  &lt;input type=\"email\" id=\"email\" name=\"email\" required&gt;\n  \n  &lt;label for=\"password\"&gt;Mot de passe :&lt;\/label&gt;\n  &lt;input type=\"password\" id=\"password\" name=\"password\" pattern=\".{8,}\" required&gt;\n  \n  &lt;input type=\"submit\" value=\"Envoyer\"&gt;\n&lt;\/form&gt;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion et Ressources Compl\u00e9mentaires<\/h2>\n\n\n\n<p>Les <strong>formulaires en HTML<\/strong> sont un outil puissant pour collecter et soumettre des donn\u00e9es utilisateur. En les utilisant correctement avec les attributs de validation int\u00e9gr\u00e9s, vous pouvez am\u00e9liorer consid\u00e9rablement l&rsquo;interactivit\u00e9 et l&rsquo;efficacit\u00e9 de votre site web. Continuez \u00e0 explorer les tutoriels et documentations pour ma\u00eetriser les fonctionnalit\u00e9s avanc\u00e9es des formulaires HTML.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n\n\u00ab\u00a0`","protected":false},"excerpt":{"rendered":"<p>\u00ab\u00a0`html Les Formulaires en HTML sont essentiels pour interagir avec les utilisateurs dans les applications web. Comprendre comment cr\u00e9er et utiliser efficacement des formulaires en&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2740,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5331","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5331"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5331\/revisions"}],"predecessor-version":[{"id":5332,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5331\/revisions\/5332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2740"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}