{"id":41,"date":"2023-12-21T21:18:35","date_gmt":"2023-12-21T21:18:35","guid":{"rendered":"https:\/\/yzaz.net\/html\/?page_id=41"},"modified":"2024-11-03T10:02:13","modified_gmt":"2024-11-03T10:02:13","slug":"formulaires","status":"publish","type":"page","link":"https:\/\/yzaz.net\/html\/formulaires\/","title":{"rendered":"formulaires"},"content":{"rendered":"<p>La balise <strong>form <\/strong>permet d&#8217;ajouter un formulaire <\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;form method=&quot;post&quot; action=&quot;traitement.php&quot;&gt;\r\n&lt;!-- Les \u00e9l\u00e9ments du formulaires --&gt; \r\n&lt;\/form&gt; \r\n<\/pre>\n<ul>\n<li>method : attribut qui indique par quel moyen les donn\u00e9es vont \u00eatre envoy\u00e9es:\n<ul>\n<li>method=&#8221;get&#8221;: les informations seront envoy\u00e9es dans l&#8217;adresse de la page (http:\/\/\u2026), <\/li>\n<li>method=&#8221;post&#8221;: elle permet d&#8217;envoyer un grand nombre \td&#8217;informations. Les donn\u00e9es saisies dans le formulaire ne transitent pas par la barre d&#8217;adresse. <\/li>\n<\/ul>\n<\/li>\n<li>action: c&#8217;est l&#8217;adresse de la page ou du programme qui va traiter les informations<\/li>\n<\/ul>\n<p>Ci-dessous les principaux \u00e9l\u00e9ments des formulaires:<\/p>\n<h3>Zone de texte monoligne<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;text&quot; name=&quot;login&quot; \/&gt;\r\n<\/pre>\n<h4>R\u00e9sultat<\/h4>\n<p><input type=\"text\" name=\"login\" \/><\/p>\n<h3>Les libell\u00e9s<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;label&gt;Votre login&lt;\/label&gt; : &lt;input type=&quot;text&quot; name=&quot;login&quot; \/&gt;\r\n<\/pre>\n<h4>R\u00e9sultat<\/h4>\n<p><label>Votre login<\/label> : <input type=\"text\" name=\"login\" \/><\/p>\n<p>Pour lier le label au champ, il faut lui donner un attribut for qui a la m\u00eame valeur que l&#8217;id du champ<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;label for=&quot;login&quot;&gt;Votre login&lt;\/label&gt; : &lt;input type=&quot;text&quot; name=&quot;login&quot; id=&quot;login&quot; \/&gt;\r\n<\/pre>\n<h4>R\u00e9sultat<\/h4>\n<p><label for=\"login\">Votre login<\/label> : <input type=\"text\" name=\"login\" id=\"login\" \/><\/p>\n<p><strong>Quelques attributs suppl\u00e9mentaires<\/strong><\/p>\n<ul>\n<li>On peut agrandir le champ avec <strong>size<\/strong>.<\/li>\n<li>On peut limiter le nombre de caract\u00e8res que l&#8217;on peut saisir avec <strong>maxlength<\/strong>.<\/li>\n<li>On peut pr\u00e9-remplir le champ avec une valeur par d\u00e9faut \u00e0 l&#8217;aide de <strong>value<\/strong>.<\/li>\n<li>On peut donner une indication sur le contenu du champ avec <strong>placeholder<\/strong>. Cette indication dispara\u00eetra d\u00e8s que le visiteur aura cliqu\u00e9 \u00e0 l&#8217;int\u00e9rieur du champ.<\/li>\n<\/ul>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;label for=&quot;login&quot;&gt;Votre login:&lt;\/label&gt;\r\n&lt;input type=&quot;text&quot; name=&quot;login&quot; id=&quot;login&quot; placeholder=&quot;Ex : toto&quot; size=&quot;30&quot; maxlength=&quot;10&quot; \/&gt;\r\n<\/pre>\n<h4>R\u00e9sultat<\/h4>\n<p><label for=\"login\">Votre login:<\/label><br \/>\n<input type=\"text\" name=\"login\" id=\"login\" placeholder=\"Ex : toto\" size=\"30\" maxlength=\"10\" \/><\/p>\n<h3>Zone de mot de passe<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;label for=&quot;login&quot;&gt;login :&lt;\/label&gt; &lt;input type=&quot;text&quot; name=&quot;login&quot; id=&quot;login&quot; \/&gt; &lt;br \/&gt;\r\n&lt;label for=&quot;pass&quot;&gt;mot de passe :&lt;\/label&gt; &lt;input type=&quot;password&quot; name=&quot;pass&quot; id=&quot;pass&quot; \/&gt;\r\n<\/pre>\n<h4>R\u00e9sultat<\/h4>\n<p><label for=\"login\">login:<\/label> <input type=\"text\" name=\"login\" id=\"login\" \/> <br \/>\n<label for=\"pass\">mot de passe :<\/label> <input type=\"password\" name=\"pass\" id=\"pass\" \/><\/p>\n<h3>Zone de texte multiligne<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;label for=&quot;comment&quot;&gt;Commentaire&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;textarea name=&quot;ameliorer&quot; id=&quot;comment&quot;&gt;&lt;\/textarea&gt;\r\n<\/pre>\n<h4>R\u00e9sultat<\/h4>\n<p><label for=\"comment\">Commentaire<\/label><br \/>\n<textarea name=\"ameliorer\" id=\"comment\"><\/textarea><\/p>\n<h3>checkbox<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nCochez les aliments que vous aimez manger :&lt;br \/&gt;\r\n&lt;input type=&quot;checkbox&quot; name=&quot;couscous&quot; id=&quot;couscous&quot; \/&gt; &lt;label for=&quot;couscous&quot;&gt;Couscous&lt;\/label&gt;\r\n&lt;input type=&quot;checkbox&quot; name=&quot;pastilla&quot; id=&quot;pastilla&quot; \/&gt; &lt;label for=&quot;pastilla&quot;&gt;Pastilla&lt;\/label&gt;\r\n&lt;input type=&quot;checkbox&quot; name=&quot;mechoui&quot; id=&quot;mechoui&quot; \/&gt; &lt;label for=&quot;mechoui&quot;&gt;Mechoui&lt;\/label&gt;\r\n&lt;input type=&quot;checkbox&quot; name=&quot;tanjia&quot; id=&quot;tanjia&quot; \/&gt; &lt;label for=&quot;tanjia&quot;&gt;Tanjia&lt;\/label&gt;\r\n\r\n<\/pre>\n<h4>Resultat:<\/h4>\n<p>Cochez les aliments que vous aimez manger :<br \/>\n<input type=\"checkbox\" name=\"couscous\" id=\"couscous\" \/> <label for=\"couscous\">Couscous<\/label><br \/>\n<input type=\"checkbox\" name=\"pastilla\" id=\"pastilla\" \/> <label for=\"pastilla\">Pastilla<\/label><br \/>\n<input type=\"checkbox\" name=\"mechoui\" id=\"mechoui\" \/> <label for=\"mechoui\">Mechoui<\/label><br \/>\n<input type=\"checkbox\" name=\"tanjia\" id=\"tanjia\" \/> <label for=\"tanjia\">Tanjia<\/label><\/p>\n<h3>Les zones d&#8217;options<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\nVeuillez indiquer la tranche d&#039;\u00e2ge dans laquelle vous vous situez :&lt;br \/&gt;\r\n&lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;moins15&quot; id=&quot;moins15&quot; \/&gt; &lt;label for=&quot;moins15&quot;&gt;Moins de 15 ans&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;medium15-25&quot; id=&quot;medium15-25&quot; \/&gt; &lt;label for=&quot;medium15-25&quot;&gt;15-25 ans&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;medium25-40&quot; id=&quot;medium25-40&quot; \/&gt; &lt;label for=&quot;medium25-40&quot;&gt;25-40 ans&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;plus40&quot; id=&quot;plus40&quot; \/&gt; &lt;label for=&quot;plus40&quot;&gt;Plus de 40 ans&lt;\/label&gt;\r\n<\/pre>\n<p>Veuillez indiquer la tranche d&#8217;\u00e2ge dans laquelle vous vous situez :<br \/>\n<input type=\"radio\" name=\"age\" value=\"moins15\" id=\"moins15\" \/> <label for=\"moins15\">Moins de 15 ans<\/label><br \/>\n<input type=\"radio\" name=\"age\" value=\"medium15-25\" id=\"medium15-25\" \/> <label for=\"medium15-25\">15-25 ans<\/label><br \/>\n<input type=\"radio\" name=\"age\" value=\"medium25-40\" id=\"medium25-40\" \/> <label for=\"medium25-40\">25-40 ans<\/label><br \/>\n<input type=\"radio\" name=\"age\" value=\"plus40\" id=\"plus40\" \/> <label for=\"plus40\">Encore plus vieux que \u00e7a ?!<\/label><\/p>\n<h3>Les listes d\u00e9roulantes<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;form method=&quot;post&quot; action=&quot;traitement.php&quot;&gt;\r\n&lt;p&gt; &lt;label for=&quot;pays&quot;&gt;Dans quel pays habitez-vous ?&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;select name=&quot;pays&quot; id=&quot;pays&quot;&gt;\r\n   &lt;option value=&quot;maroc&quot;&gt;Maroc&lt;\/option&gt;\r\n   &lt;option value=&quot;algerie&quot;&gt;Alg\u00e9rie&lt;\/option&gt;\r\n   &lt;option value= tunisie&gt;Tunisie&lt;\/option&gt;\r\n   &lt;option value=&quot;senegal&quot;&gt;S\u00e9n\u00e9gal&lt;\/option&gt; \r\n   &lt;option value=&quot;egypte&quot;&gt;Egypte&lt;\/option&gt; \r\n   &lt;option value=&quot;burkinafaso&quot;&gt;Burkina Faso&lt;\/option&gt;\r\n&lt;\/select&gt; &lt;\/p&gt; &lt;\/form&gt;\r\n<\/pre>\n<h4>R\u00e9sultat<\/h4>\n<form method=\"post\" action=#>\n<p> <label for=\"pays\">Dans quel pays habitez-vous ?<\/label><br \/>\n<select name=\"pays\" id=\"pays\"><option value=\"maroc\">Maroc<\/option><option value=\"algerie\">Alg\u00e9rie<\/option><option value= tunisie>Tunisie<\/option><option value=\"senegal\">S\u00e9n\u00e9gal<\/option><option value=\"egypte\">Egypte<\/option><option value=\"burkinafaso\">Burkina Faso<\/option><\/select> <\/p>\n<\/p><\/form>\n<h3>Les listes d\u00e9roulantes<\/h3>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;label for=&quot;pays&quot;&gt;Dans quel pays habitez-vous ?&lt;\/label&gt;\r\n&lt;select name=&quot;pays&quot; id=&quot;pays&quot;&gt;\r\n   &lt;optgroup label=&quot;Afrique&quot;&gt;\r\n   &lt;option value=&quot;maroc&quot;&gt;Maroc&lt;\/option&gt;\r\n   &lt;option value=&quot;algerie&quot;&gt;Alg\u00e9rie&lt;\/option&gt;\r\n   &lt;option value= tunisie&gt;Tunisie&lt;\/option&gt;\r\n   &lt;option value=&quot;senegal&quot;&gt;S\u00e9n\u00e9gal&lt;\/option&gt; \r\n&lt;\/optgroup&gt;\r\n&lt;optgroup label=&quot;Am\u00e9rique&quot;&gt;\r\n   &lt;option value=&quot;canada&quot;&gt;Canada&lt;\/option&gt;\r\n   &lt;option value=&quot;etats-unis&quot;&gt;Etats-Unis&lt;\/option&gt; \r\n&lt;\/optgroup&gt;\r\n&lt;optgroup label=&quot;Asie&quot;&gt; \r\n   &lt;option value=&quot;inde&quot;&gt;Inde&lt;\/option&gt;\r\n   &lt;option value=&quot;chine&quot;&gt;Chine&lt;\/option&gt;\r\n   &lt;option value=&quot;japon&quot;&gt;Japon&lt;\/option&gt; \r\n&lt;\/optgroup&gt;\r\n&lt;\/select&gt;\r\n<\/pre>\n<h4>R\u00e9sultat<\/h4>\n<p><label for=\"pays\">Dans quel pays habitez-vous ?<\/label><br \/>\n<select name=\"pays\" id=\"pays\"><br \/>\n<optgroup label=\"Afrique\"><option value=\"maroc\">Maroc<\/option><option value=\"algerie\">Alg\u00e9rie<\/option><option value= tunisie>Tunisie<\/option><option value=\"senegal\">S\u00e9n\u00e9gal<\/option><\/optgroup><br \/>\n<optgroup label=\"Am\u00e9rique\"><option value=\"canada\">Canada<\/option><option value=\"etats-unis\">Etats-Unis<\/option><\/optgroup><br \/>\n<optgroup label=\"Asie\"><option value=\"inde\">Inde<\/option><option value=\"chine\">Chine<\/option><option value=\"japon\">Japon<\/option><\/optgroup><br \/>\n<\/select><\/p>\n<h4>T\u00e9l\u00e9phone<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;tel&quot; \/&gt;\r\n<\/pre>\n<p><input type=\"tel\" \/><\/p>\n<h4>Nombre<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;number&quot; \/&gt;\r\n<\/pre>\n<p><input type=\"number\" \/><\/p>\n<h4>Curseur<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;range&quot; \/&gt;\r\n<\/pre>\n<p><input type=\"range\" \/><\/p>\n<h4>Couleur<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;color&quot; \/&gt;\r\n<\/pre>\n<p><input type=\"color\" \/><\/p>\n<h4>Date<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;date&quot; \/&gt;\r\n<\/pre>\n<p><input type=\"date\" \/><\/p>\n<h4>Recherche<\/h4>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;input type=&quot;search&quot; \/&gt;\r\n<\/pre>\n<p><input type=\"search\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La balise form permet d&#8217;ajouter un formulaire &lt;form method=&quot;post&quot; action=&quot;traitement.php&quot;&gt; &lt;!&#8211; Les \u00e9l\u00e9ments du formulaires &#8211;&gt; &lt;\/form&gt; method : attribut qui indique par quel moyen les donn\u00e9es vont \u00eatre envoy\u00e9es: method=&#8221;get&#8221;: les informations seront envoy\u00e9es dans l&#8217;adresse de la page (http:\/\/\u2026), method=&#8221;post&#8221;: elle permet d&#8217;envoyer un grand nombre d&#8217;informations. Les donn\u00e9es saisies dans le formulaire ne transitent pas par la<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":10,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/41"}],"collection":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/comments?post=41"}],"version-history":[{"count":1,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/41\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/pages\/41\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/yzaz.net\/html\/wp-json\/wp\/v2\/media?parent=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}