{"id":376,"date":"2008-11-10T12:27:03","date_gmt":"2008-11-10T11:27:03","guid":{"rendered":"http:\/\/nyams.planbweb.com\/blog\/?p=376"},"modified":"2008-11-10T12:27:03","modified_gmt":"2008-11-10T11:27:03","slug":"comment-soumettre-un-formulaire-html","status":"publish","type":"post","link":"https:\/\/nyamsprod.com\/blog\/comment-soumettre-un-formulaire-html\/","title":{"rendered":"Comment soumettre un formulaire HTML"},"content":{"rendered":"<div class=\"message warning\">\n<p><strong>Attention:<\/strong> Les informations de ce billet sont susceptibles d'&ecirc;tre obsol&egrave;tes car vieux de plus 2 ans.<\/p>\n<p><strong>Warning: <\/strong> The information you are reading may be obsolete, this post was published more than 2 years ago.<\/p>\n<\/div><p>La soumission de formulaire est l&#8217;activit\u00e9 la plus importante sur internet. L&#8217;inscription \u00e0 un site de rencontre, les transactions bancaires pour acheter son ticket d&#8217;avion ou l&#8217;ajout de commentaires sur un blog, toutes ces actions se font via la soumission d&#8217;un formulaire. Les d\u00e9veloppeurs web sont donc devenu, \u00e0 la longue, des sp\u00e9cialistes de la validation de formulaire, via Javascript, c\u00f4t\u00e9 client, via les langages scripts, c\u00f4t\u00e9 serveur. Nous passons tellement de temps \u00e0 valider nos formulaires que l&#8217;action m\u00eame de les envoyer du client vers le serveur est pass\u00e9e au second plan. J&#8217;en profite donc pour rappeler, exposer ou faire d\u00e9couvrir \u00e0 certains, les diff\u00e9rentes mani\u00e8res de soumettre un formulaire via HTML. <!--more--><\/p>\n<p>Suivant les recommendations du W3C :<\/p>\n<ul>\n<li>Si votre bouton de soumission ne contient pas d&#8217;attribut <code>name<\/code>, le formulaire sera envoy\u00e9 mais l&#8217;information de la balise de validation ne sera pas prise en compte.\u00a0<\/li>\n<li>Seule la valeur de l&#8217;attribut <code>value<\/code> de la balise de soumission est prise en compte lors de l&#8217;envoie d&#8217;un formulaire.<\/li>\n<li>Lorsqu&#8217;un formulaire contient plusieurs boutons de soumission, <strong>seule<\/strong> la valeur de l&#8217;attribut <code>value<\/code> de la balise que l&#8217;on aura cliqu\u00e9 sera envoy\u00e9e, les autres balises de soumissions ne seront pas prise en compte.<\/li>\n<\/ul>\n<p>Sachant cela, et aussi surprenant que cela puisse para\u00eetre \u00e0 certain,\u00a0<strong>Il existe 2 balises et 3 mani\u00e8res de soumettre un formulaire HTML<\/strong>. Et bien que compl\u00e9mentaires, chacune de ses techniques poss\u00e8de des avantages et des inconv\u00e9nients.\u00a0<\/p>\n<h2><span style=\"font-weight: normal;\">En utilisant la balise INPUT avec l&#8217;attribut type=submit<\/span><\/h2>\n<p style=\"text-align: center; \">\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;input type=&quot;submit&quot; name=&quot;q&quot; value=&quot;search&quot; \/&gt;<\/pre>\n<\/p>\n<p>C&#8217;est de loin la technique la plus utilis\u00e9e. Son utilisation est tellement simple et intuitive que la majorit\u00e9 des\u00a0d\u00e9veloppeurs n&#8217;utilisent <strong>que <\/strong>cette technique, par paresse, par manque de temps.. ou, tout simplement,\u00a0parce qu&#8217;ils n&#8217;ont pas encore lu mon article \ud83d\ude09 . L&#8217;avantage de cette technique et qu&#8217;elle fonctionne sous tous les navigateurs.\u00a0Elle est simple \u00e0 implanter, ne contient aucun bug et aucune surprise ne nous attend. Les d\u00e9savantages de cette balise sont pourtant l\u00e9gions :<\/p>\n<ul>\n<li>Le contenu texte de la balise refl\u00e8te directement la valeur de l&#8217;attribut <strong>value<\/strong>, donc on ne peut pas \u00e9crire ce que l&#8217;on veut<\/li>\n<li>Seule l&#8217;utilisation de CSS permet de rendre le bouton plus attrayant<\/li>\n<\/ul>\n<h2><span style=\"font-weight: normal;\">En utilisant la balise INPUT avec l&#8217;atribut type=image\u00a0<\/span><\/h2>\n<p style=\"text-align: center; \">\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;input type=&quot;image&quot; name=&quot;q&quot; value=&quot;search&quot; alt=&quot;search&quot; src=&quot;images\/search.png&quot; \/&gt;<\/pre>\n<\/p>\n<p>A l&#8217;\u00e9poque ou le CSS n&#8217;existait\u00a0pas encore, cette technique \u00e9tait tr\u00e8s r\u00e9pandue. En indiquant le <code>type=\"image\"<\/code>, votre navigateur\u00a0s&#8217;attend \u00e0 trouver 2 attributs en plus dans la balise <code>input<\/code>, les attributs <code>src<\/code> et <code>alt<\/code> comme ceux utilis\u00e9s dans la balise\u00a0<code>img<\/code>. Vous avez compris, le formulaire va \u00eatre soumis via l&#8217;utilisation d&#8217;une image comme bouton d&#8217;envoi. A l&#8217;\u00e9poque cela avait beaucoup d&#8217;avantage on pouvait facilement rendre attrayant son formulaire. De plus, outre la valeur de l&#8217;attribut <code>value<\/code>,\u00a0si elle existe, les valeurs des coordon\u00e9es X et Y du clic de la souris par rapport \u00e0 l&#8217;image sont \u00e9galement\u00a0envoy\u00e9es lors de la\u00a0soumission du formulaire. Cette technique pr\u00e9sente un d\u00e9savantage non n\u00e9gligeable, en fonction de la compr\u00e9hension du W3C par les <a title=\"Bug d'affichage sous Internet Explorer et Opera - Il manque la valeur de l'attribut value\" rel=\"lightbox\" href=\"http:\/\/www.nyamsprod.com\/blog\/wp-content\/uploads\/2008\/11\/image-trident-opera.png\">diff\u00e9rents<\/a> <a title=\"Gecko et Webkit envoient la valeur de l'attribut value\" rel=\"lightbox\" href=\"http:\/\/www.nyamsprod.com\/blog\/wp-content\/uploads\/2008\/11\/image-webkit-gecko.png\">navigateurs<\/a>, <a title=\"mauvaise interpr\u00e9tation de l'input type=image par certains navigateurs\" href=\"http:\/\/nyams.planbweb.com\/test\/submit\/image.php\"> l&#8217;ajout ou non de la valeur de l&#8217;attribut <\/a><code><a title=\"mauvaise interpr\u00e9tation de l'input type=image par certains navigateurs\" href=\"http:\/\/nyams.planbweb.com\/test\/submit\/image.php\">value<\/a><\/code><a title=\"mauvaise interpr\u00e9tation de l'input type=image par certains navigateurs\" href=\"http:\/\/nyams.planbweb.com\/test\/submit\/image.php\">\u00a0varie selon le navigateur<\/a>. En r\u00e9sum\u00e9, les r\u00e9sultats que vous obtiendrait ne seront pas fiable. De plus avec l&#8217;adoption du CSS cette technique semble \u00eatre de moins en moins utilis\u00e9e.\u00a0<\/p>\n<h2><span style=\"font-weight: normal;\">En utilisant la balise\u00a0BUTTON avec l&#8217;attribut type=submit<\/span><\/h2>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&lt;button type=&quot;submit&quot; name=&quot;q&quot; value=&quot;search&quot;&gt;\nici je peux raconter ma vie et &lt;img\u00a0alt=&quot;rechercher&quot; src=&quot;images\/search.png&quot; \/&gt; autre chose\n&lt;\/button&gt;<\/pre>\n<p>De prime abord, visuellement, pour une personne qui ne fait pas attention, l&#8217;utilisation de la balise button associ\u00e9e \u00e0 l&#8217;attribut <code>type=\"submit\"<\/code> est identique \u00e0 l&#8217;utilisation de la balise input, mais il n&#8217;en est rien. La grande diff\u00e9rence est que\u00a0l&#8217;on peut rajouter autant de texte et de contenu que l&#8217;on veut avec la balise button. La balise bouton n&#8217;affiche pas la valeur\u00a0de l&#8217;attribut <code>value <\/code>mais plut\u00f4t le contenu inclut entre ses balises d&#8217;ouverture et de fermeture. cette balise offre donc une libert\u00e9 maximale, et devrait \u00eatre la balise pr\u00e9f\u00e9r\u00e9e des designers et des d\u00e9veloppeurs, car avec ou sans CSS les possibilit\u00e9s de mise en valeur\u00a0sont beaucoup plus importantes qu&#8217;avec la balise <code>input<\/code>.<\/p>\n<p>H\u00e9las, l&#8217;adoption de cette balise sur un\u00a0site de production n&#8217;est pas possible. Pourquoi ? <a title=\"Bug de l'implantation de la balise button sous Internet Explorer\" href=\"http:\/\/nyams.planbweb.com\/test\/submit\/button.php\">Parce que Internet Explorer jusqu&#8217;\u00e0 sa version 8 l&#8217;implante mal<\/a>. Au lieu\u00a0de soumettre la valeur de l&#8217;attribut <code>value<\/code>, comme indiqu\u00e9 par le W3C, <a title=\"le contenu equivalent a innerHTML est envoy\u00e9 vers le serveur\" rel=\"lightbox\" href=\"http:\/\/www.nyamsprod.com\/blog\/wp-content\/uploads\/2008\/11\/button-trident.png\">IE soumet le contenu compris entre les balises d&#8217;ouverture et de fermeture de la balise button<\/a>. En clair, la valeur attendu n&#8217;est pas celle que l&#8217;on re\u00e7oit. Ce bug limite donc tr\u00e8s fortement l&#8217;utilisation de cette technique\u00a0sur un site grand publique, du fait des parts de march\u00e9 de IE \ud83d\ude41 .<\/p>\n<p>Il serait int\u00e9ressant de voir si avec la sortie de IE8 l&#8217;utilisation de la balise BUTTON va enfin augmenter, de toute les\u00a0mani\u00e8res moi je suis pour, c&#8217;est pourquoi je l&#8217;utilise sur mon site \ud83d\ude09 .<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les 2 balises et les 3 mani\u00e8res de soumettre un formulaire HTML sans javascript. Les avantages et les inconv\u00e9nients de ces techniques avec exemples <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[5],"tags":[87,156,205,206,253,273,277,497,540,541],"class_list":["post-376","post","type-post","status-publish","format-standard","hentry","category-web","tag-button","tag-didactiel","tag-form","tag-formulaire","tag-html","tag-image","tag-input","tag-soumission","tag-tutorial","tag-typeimage"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/376","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/comments?post=376"}],"version-history":[{"count":0,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/posts\/376\/revisions"}],"wp:attachment":[{"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/media?parent=376"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/categories?post=376"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nyamsprod.com\/blog\/wp-json\/wp\/v2\/tags?post=376"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}