
<p>Lors de la cr&eacute;ation de formulaires en HTML, on d&eacute;termine un attribut d&rsquo;action qui d&eacute;signe une page PHP destin&eacute;e &agrave; traiter les informations transmissent. Voyons comment utiliser les variables super-globales <code>$_GET</code> et <code>$_POST</code>.</p>
<h2>Transfert des donn&eacute;es</h2>
<p>Lors de la validation des formulaires le navigateur ouvre la page d&rsquo;action et y transf&egrave;re les donn&eacute;es contenu dans les champs du formulaire.</p>
<p>Ces donn&eacute;es sont stock&eacute;es dans la variable super-globale <code>get</code> ou <code>post</code>, sous la forme d&rsquo;un array.</p>
<h3>La s&eacute;curit&eacute; avant tout</h3>
<p>Il faut d&eacute;finir la m&eacute;thode lors de la cr&eacute;ation du formulaire en HTML.</p>
<pre class="lang:markup">&lt;form action="/formulaire.php" method="get"&gt;</pre>
<p>ou</p>
<pre class="lang:markup">&lt;form action="/formulaire.php" method="post"&gt;</pre>
<p>Les deux super-globales se manipulent exactement de la m&ecirc;me fa&ccedil;on. La diff&eacute;rence ce trouve au niveau de la confidentialit&eacute; des donn&eacute;es.</p>
<p>La m&eacute;thode <code>$_GET</code> transf&egrave;re les donn&eacute;es par l&rsquo;URL. Elles sont donc lisible par les visiteurs et surtout stocker dans l&rsquo;historique. Il faut donc bien r&eacute;fl&eacute;chir &agrave; la nature des donn&eacute;es qui vont transiter et le degr&eacute; de confidentialit&eacute;.</p>
<p>Alors que la m&eacute;thode <code>$_POST</code> transmet les donn&eacute;es par le protocole HTTP.</p>
<p>La m&eacute;thode <code>$_POST</code> n&rsquo;a pas de limite, l&agrave; ou la m&eacute;thode <code>$_GET</code> est limit&eacute; &agrave; 3000 caract&egrave;res.</p>
<h3>Afficher les donn&eacute;es</h3>
<p>Un formulaire qui ne r&eacute;cup&eacute;rer pas les donn&eacute;es ne sert &agrave; rien. Voyons dans un premier temps comment r&eacute;cup&eacute;rer les valeurs dans la super-globale.</p>
<pre class="lang:markup">&lt;form action="formulaire.php" method="get"&gt;
nom : &lt;input type="text" name="nom"&gt;&lt;br&gt;
E-mail: &lt;input type="text" name="email"&gt;&lt;br&gt;
&lt;input type="submit"&gt;
&lt;/form&gt;</pre>
<p>Le formulaire utilise la m&eacute;thode <code>$_GET</code>, ce qui signifie que les donn&eacute;es transiteront par l&rsquo;URL, sous cette forme.</p>
<pre class="lang:markup">/formulaire.php?nom=Mickey&amp;email=Mouse@mickey.com</pre>
<p>Mais pour les r&eacute;utiliser dans notre page PHP, nous allons rappeler la variable super-globale <code>$_GET</code>.</p>
<pre class="lang:php">&lt;?php echo $_GET["nom"].$_get["email"]; ?&gt;</pre>
<p>Si nous avions utilis&eacute; la m&eacute;thode <code>POST</code>, l&rsquo;url n&rsquo;aurait pas &eacute;tait modifi&eacute; et nous utiliserions <code>$_POST</code> en lieu et place de <code>$_GET</code>.</p>
<pre class="lang:markup">&lt;?php echo $_POST["nom"].$_get["email"]; ?&gt;</pre>
<p>&nbsp;</p>
<div class='rp4wp-related-posts'>
<h3>Articles Liés</h3>
<ul>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/formulaire-html/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="Contact portable" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-150x150.jpg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-300x300.jpg 300w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/10/hands-coffee-smartphone-technology-1160x1160.jpg 1160w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/formulaire-html/'>Formulaire HTML</a><p>Imaginez vous un site commercial sans formulaire de contact ?…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/design/design-formulaire-contact/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/5-PLUGINS-1-1-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="5 designs pour vos formulaires" loading="lazy" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/design/design-formulaire-contact/'>Design pour formulaire de contact</a><p>Les différents champs de formulaire de votre site doivent s'intégrer…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/formation/fin-de-semaine-php/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="PHP code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-300x300.jpeg 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/formation/fin-de-semaine-php/'>Fin de la semaine PHP</a><p>La semaine de formation PHP est fini ! Nous avons…</p></div>
</li>
</ul>
</div>


Formulaire PHP


<p class="intro-text separator">Imaginez vous un site commercial sans formulaire de contact ? Nous allons voir comme construire un formulaire de contact en HTML.</p>
<h2><span class="ez-toc-section" id="les-balises-et-leurs-attributs"></span>Les balises et leurs attributs<span class="ez-toc-section-end"></span></h2>
<p>Pour construire notre formulaire nous utiliserons les balises form et input.</p>
<h3><span class="ez-toc-section" id="la-balise-form"></span>La balise FORM<span class="ez-toc-section-end"></span></h3>
<p>Un formulaire se construit imp&eacute;rativement avec la balise <code><strong>&lt;form&gt;</strong></code>. A l&rsquo;int&eacute;rieur de cette balise nous ajouterons les champs qui permettrons d&rsquo;y saisir des informations.</p>
<pre class="line-numbers"><code class="language-markup">&lt;form&gt;
//d&eacute;clare un espace de formulaire
&lt;/form&gt;</code></pre>
<h3><span class="ez-toc-section" id="la-balise-input"></span>La balise INPUT<span class="ez-toc-section-end"></span></h3>
<p><code><strong>&lt;input&gt;</strong></code> d&eacute;clare un champ ce champ peut contenir diff&eacute;rentes type d&rsquo;informations. Pour diff&eacute;rencier les informations il est n&eacute;cessaire d&rsquo;utiliser les attributs afin de rendre le formulaire efficace.</p>
<h4><span class="ez-toc-section" id="les-attributs-dinput"></span>Les attributs d&rsquo;INPUT<span class="ez-toc-section-end"></span></h4>
<p>La balise <code><strong>INPUT</strong> </code>ne suffit donc pas &agrave; cr&eacute;er un formulaire, l&rsquo;attribut permet de d&eacute;finir le types d&rsquo;informations qui doit &ecirc;tre r&eacute;cup&eacute;r&eacute;, tout en proposant diff&eacute;rents mode de saisie.</p>
<p>Dans un premier temps nous allons aborder les attributs fondamentaux avant d&rsquo;observer des attributs plus sp&eacute;cialis&eacute;s.</p>
<h4><span class="ez-toc-section" id="text-input"></span>Text Input<span class="ez-toc-section-end"></span></h4>
<p><code>&lt;input type="<strong>text</strong>"&gt;</code> d&eacute;fini un champ de texte en une ligne. Il est diff&eacute;rent de &ldquo;<code><strong>textarea</strong></code>&rdquo; qui permet de saisir du texte et d&rsquo;utiliser plusieurs lignes.</p>
<pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  Pseudo :&lt;br&gt;
  &lt;input type="text" name="nom"&gt;&lt;br&gt;
  Pr&eacute;sentation :&lt;br&gt;
  &lt;input type="text" name="bio"&gt;
&lt;/form&gt;</code></pre>
<form>Pseudo :<br><input name="nom" type="text"><br>
Pr&eacute;sentation :<br><input name="bio" type="text"></form>
<p>&nbsp;</p>
<h4><span class="ez-toc-section" id="radio-button-input"></span>Radio Button Input<span class="ez-toc-section-end"></span></h4>
<p><code>&lt;input type="radio"&gt;</code> Permet de mettre en place s&eacute;lection unique parmi plusieurs choix.</p>
<pre class="line-numbers"><code class="language-markup">&lt;form&gt;
  &lt;input type="radio" name="test" value="1" checked&gt; 1&lt;br&gt;
  &lt;input type="radio" name="test" value="2"&gt; 2&lt;br&gt;
  &lt;input type="radio" name="test" value="3"&gt; ou 3
&lt;/form&gt;</code></pre>
<form><input checked name="test" type="radio" value="1"> 1<br><input name="test" type="radio" value="2"> 2<br><input name="test" type="radio" value="3"> ou 3</form>
<h4><span class="ez-toc-section" id="input-submit"></span>Input Submit<span class="ez-toc-section-end"></span></h4>
<p>C&rsquo;est bien jolie d&rsquo;avoir un formulaire mais encore faut-il pouvoir l&rsquo;envoyer. Nous nous concentrons ici sur l&rsquo;envoi des donn&eacute;es par le formulaire, le traitement des donn&eacute;es se fera avec le PHP.</p>
<p><code>&lt;input type="<strong>submit</strong>" value="Submit"&gt;</code> doit etre utiliser avec&nbsp;<code>&lt;form action="/action_page.php"&gt;</code>, il faut d&eacute;finir la page qui va devoir traiter les donn&eacute;es du formulaires avant de les envoyer.</p>
<pre class="line-numbers"><code class="language-markup">&lt;form action="/action_page.php"&gt;
 Pseudo :&lt;br&gt; 
 &lt;input type="text" name="nom"&gt;&lt;br&gt;
 Pr&eacute;sentation :&lt;br&gt; 
 &lt;input type="text" name="bio"&gt; 
 &lt;input type="radio" name="test" value="1" checked&gt; 1&lt;br&gt;
 &lt;input type="radio" name="test" value="2"&gt; 2&lt;br&gt;
 &lt;input type="radio" name="test" value="3"&gt; ou 3&lt;br&gt;
 &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;</code></pre>
<form action="/#">Pseudo :<br><input name="nom" type="text"><br>
Pr&eacute;sentation :<br><input name="bio" type="text"><br><input checked name="test" type="radio" value="1"> 1<br><input name="test" type="radio" value="2"> 2<br><input name="test" type="radio" value="3"> ou 3<br><input type="submit" value="Submit ou pas"></form>
<p>L&rsquo;exemple n&rsquo;est pas fonctionnel mais en temps normal le formulaire renvoi les informations dans l&rsquo;url d&rsquo;appel d&eacute;fini par l&rsquo;attribut action.</p>
<pre class="line-numbers"><code class="language-markup">/action_page.php?nom=Mickey&amp;bio=description&amp;test=3</code></pre>
<p>Pour la suite c&rsquo;est au PHP de prendre la rel&eacute;ve ce que nous verrons dans un autre article.</p>
<p>&nbsp;</p>
<h4><span class="ez-toc-section" id="select"></span>SELECT<span class="ez-toc-section-end"></span></h4>
<p>Permet de cr&eacute;er une liste d&eacute;roulante</p>
<pre class="line-numbers"><code class="language-markup">&lt;select name="code"&gt;
  &lt;option value="html"&gt;Html&lt;/option&gt;
  &lt;option value="css"&gt;Css&lt;/option&gt;
  &lt;option value="php"&gt;Php&lt;/option&gt;
  &lt;option value="sql"&gt;Sql&lt;/option&gt;
&lt;/select&gt;</code></pre>
<p><select name="code"><option value="html">Html</option><option value="css">Css</option><option value="php">Php</option><option value="sql">Sql</option></select></p>
<p>Par d&eacute;faut c&rsquo;est le premier &eacute;l&eacute;ment de la liste qui est s&eacute;lectionn&eacute;. Mais vous pouvez d&eacute;finir vous m&ecirc;me la valeur par d&eacute;faut.</p>
<pre class="line-numbers"><code class="language-markup">&lt;select name="code"&gt;
  &lt;option value="html"&gt;Html&lt;/option&gt;
  &lt;option value="css" selected&gt;Css&lt;/option&gt;
  &lt;option value="php"&gt;Php&lt;/option&gt;
  &lt;option value="sql"&gt;Sql&lt;/option&gt;
&lt;/select&gt;</code></pre>
<p><select name="code"><option value="html">Html</option><option selected value="css">Css</option><option value="php">Php</option><option value="sql">Sql</option></select></p>
<p>Ou encore le nombre d&rsquo;option &agrave; afficher dans la liste.</p>
<pre class="line-numbers"><code class="language-markup">&lt;select name="code" size="2"&gt;
  &lt;option value="html"&gt;Html&lt;/option&gt;
  &lt;option value="css" selected&gt;Css&lt;/option&gt;
  &lt;option value="php"&gt;Php&lt;/option&gt;
  &lt;option value="sql"&gt;Sql&lt;/option&gt;
&lt;/select&gt;</code></pre>
<p><select name="code" size="2"><option value="html">Html</option><option selected value="css">Css</option><option value="php">Php</option><option value="sql">Sql</option></select></p>
<p>On peut aussi choisir le nombre d&rsquo;option s&eacute;lectionnable</p>
<pre class="line-numbers"><code class="language-markup">&lt;select name="code" size="4" multiple&gt;
&lt;option value="html"&gt;Html&lt;/option&gt;
&lt;option selected="selected" value="css"&gt;Css&lt;/option&gt;
&lt;option value="php"&gt;Php&lt;/option&gt;
&lt;option value="sql"&gt;Sql&lt;/option&gt;
&lt;/select&gt;</code></pre>
<p><select multiple name="code" size="4"><option value="sql">Sql</option></select></p>
<p>Method</p>
<p>Maintenant que nous avons cr&eacute;er le formulaire, il est n&eacute;cessaire de d&eacute;finir la page qui traitera l&rsquo;action et la m&eacute;thode qui nous permettra de transmettre et de manipuler les donn&eacute;es transmissent.</p>
<p>Pour ce faire nous allons d&eacute;finir l&rsquo;attribut <code>method</code> &agrave; notre balise <code>form</code>.</p>
<div class='rp4wp-related-posts'>
<h3>Articles Liés</h3>
<ul>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/formulaire-php/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="PHP code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-300x300.jpeg 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/formulaire-php/'>Formulaire PHP</a><p>Lors de la création de formulaires en HTML, on détermine…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/html/construire-page-html5/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="HTML code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-300x300.jpeg 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/html/construire-page-html5/'>Construire une page en HTML5</a><p>Pour créer une page HTML5 il ne suffit pas de…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/html/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="HTML code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/Code_HTML-300x300.jpeg 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/html/'>HTML</a><p>Le HTML est le code qui structure une page internet.…</p></div>
</li>
</ul>
</div>


Formulaire HTML


<p>Les diff&eacute;rents champs de formulaire de votre site doivent s&rsquo;int&eacute;grer au mieux dans votre design tout en &eacute;tant suffisamment visible et attractif pour motiver l&rsquo;interaction avec vos visiteurs.</p>
<p>Pour am&eacute;liorer vos formulaires voici une s&eacute;lection de cinq outils CSS payant qui vous faciliterons le travail.</p>
<p class="perf_alert perf_alert_default">Avec un prix moyen de 5$ pourquoi se priver.</p>
<h2><span class="ez-toc-section" id="animation-et-flat-design-colore"></span><a href="http://codecanyon.net/item/tforms-animated-forms-kit/8562442?ref=Occitaweb">Animation et flat design color&eacute;</a><span class="ez-toc-section-end"></span></h2>
<figure id="attachment_4778" aria-describedby="caption-attachment-4778" style="width: 590px" class="wp-caption aligncenter"><a href="http://codecanyon.net/item/tforms-animated-forms-kit/8562442?ref=Occitaweb" target="_blank" rel="noopener"><img loading="lazy" class="wp-image-4778 size-full" src="http://www.occitaweb.fr/wp-content/uploads/2014/11/preview-2.png" alt="tForms animated forms kit" width="590" height="300" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/preview-2.png 590w, https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/preview-2-300x153.png 300w" sizes="(max-width: 590px) 100vw, 590px"></a><figcaption id="caption-attachment-4778" class="wp-caption-text">Animez vos formulaires avec tForms</figcaption></figure>
<p>Surement le design le plus original de cette s&eacute;lection, avec ses couleurs pastel et ses animations r&eacute;ussi, il conviendra &agrave; tous ce qui souhaitent dynamiser leurs formulaires.</p>
<h2><span class="ez-toc-section" id="enregistrement-en-quatre-etapes"></span><a href="http://codecanyon.net/item/responsive-login-sign-up-and-payment-form-wizard/8020781?ref=Occitaweb">Enregistrement en quatre &eacute;tapes</a><span class="ez-toc-section-end"></span></h2>
<figure id="attachment_4777" aria-describedby="caption-attachment-4777" style="width: 590px" class="wp-caption aligncenter"><a href="http://codecanyon.net/item/responsive-login-sign-up-and-payment-form-wizard/8020781?ref=Occitaweb" target="_blank" rel="noopener"><img loading="lazy" class="wp-image-4777 size-full" src="http://www.occitaweb.fr/wp-content/uploads/2014/11/01_preview-1.png" alt="Form wizard " width="590" height="300" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/01_preview-1.png 590w, https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/01_preview-1-300x153.png 300w" sizes="(max-width: 590px) 100vw, 590px"></a><figcaption id="caption-attachment-4777" class="wp-caption-text">Enregistrement en quatre &eacute;tapes</figcaption></figure>
<p>Pour les sites d&rsquo;e-commerces qui souhaitent am&eacute;liorer l&rsquo;enregistrement sur leurs sites. Avec quatre &eacute;tapes diff&eacute;rentes pour minimiser le nombre de champs &agrave; l&rsquo;&eacute;cran.</p>
<h2><span class="ez-toc-section" id="flat-design-pour-tous-vos-formulaires"></span><a href="http://codecanyon.net/item/formicon-flat-forms-pack/7139591?ref=Occitaweb">Flat design pour tous vos formulaires</a><span class="ez-toc-section-end"></span></h2>
<figure id="attachment_4776" aria-describedby="caption-attachment-4776" style="width: 590px" class="wp-caption aligncenter"><a href="http://codecanyon.net/item/formicon-flat-forms-pack/7139591?ref=Occitaweb" target="_blank" rel="noopener"><img loading="lazy" class="wp-image-4776 size-full" src="http://www.occitaweb.fr/wp-content/uploads/2014/11/590-300-1.jpg" alt="Formicon flat forms pack" width="590" height="300" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/590-300-1.jpg 590w, https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/590-300-1-300x153.jpg 300w" sizes="(max-width: 590px) 100vw, 590px"></a><figcaption id="caption-attachment-4776" class="wp-caption-text">Formulaire en flat design.</figcaption></figure>
<p>Un design dans l&rsquo;air du temps pour Formicon, avec ses couleurs &agrave; la mode et son design flat.</p>
<h2><span class="ez-toc-section" id="effets-reliefs-et-colores"></span><a href="http://codecanyon.net/item/css3-form-pack/676083">Effets reliefs et color&eacute;s</a><span class="ez-toc-section-end"></span></h2>
<figure id="attachment_4775" aria-describedby="caption-attachment-4775" style="width: 590px" class="wp-caption aligncenter"><a href="http://codecanyon.net/item/css3-form-pack/676083" target="_blank" rel="noopener"><img loading="lazy" class="wp-image-4775 size-full" src="http://www.occitaweb.fr/wp-content/uploads/2014/11/css3-form-pack-preview-1.jpg" alt="css3-form-pack-preview" width="590" height="300" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/css3-form-pack-preview-1.jpg 590w, https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/css3-form-pack-preview-1-300x153.jpg 300w" sizes="(max-width: 590px) 100vw, 590px"></a><figcaption id="caption-attachment-4775" class="wp-caption-text">Faites votre choix parmis les 2 nuances et les 5 couleurs.</figcaption></figure>
<p>Un design un peu dat&eacute; mais qui conviendras &agrave; ce qui ne souhaite refaire tout le design leurs sites.</p>
<h2><span class="ez-toc-section" id="flat-design-pour-vos-formulaires"></span><a href="http://codecanyon.net/item/sky-forms/5009033?ref=Occitaweb">Flat design pour vos formulaires</a><span class="ez-toc-section-end"></span></h2>
<figure id="attachment_4774" aria-describedby="caption-attachment-4774" style="width: 590px" class="wp-caption aligncenter"><a href="http://codecanyon.net/item/sky-forms/5009033?ref=Occitaweb" target="_blank" rel="noopener"><img loading="lazy" class="wp-image-4774 size-full" src="http://www.occitaweb.fr/wp-content/uploads/2014/11/preview-1-1.png" alt="CSS Form design" width="590" height="300" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/preview-1-1.png 590w, https://www.admin.occitaweb.fr/wp-content/uploads/2014/11/preview-1-1-300x153.png 300w" sizes="(max-width: 590px) 100vw, 590px"></a><figcaption id="caption-attachment-4774" class="wp-caption-text">CSS Form design</figcaption></figure>
<p>Du flat et des couleurs encore mais cette fois vous avez un plus large choix de couleurs et un design sensiblement diff&eacute;rents &agrave; vous de choisir</p>
<div class='rp4wp-related-posts'>
<h3>Articles Liés</h3>
<ul>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/design/design-horizontal/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2014/07/00_preview.__large_preview-1-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" loading="lazy" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/design/design-horizontal/'>design horizontal pour wordpress</a><p>La modes est au design flat, à défilement verticaux, prés…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/code/formulaire-php/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-150x150.jpeg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="PHP code" loading="lazy" srcset="https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-150x150.jpeg 150w, https://www.admin.occitaweb.fr/wp-content/uploads/2017/12/php_code-1-300x300.jpeg 300w" sizes="(max-width: 150px) 100vw, 150px" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/code/formulaire-php/'>Formulaire PHP</a><p>Lors de la création de formulaires en HTML, on détermine…</p></div>
</li>
<li><div class='rp4wp-related-post-image'>
<a href='https://www.occitaweb.fr/design/design-horizontal/'><img width="150" height="150" src="https://www.admin.occitaweb.fr/wp-content/uploads/2014/07/00_preview.__large_preview-1-150x150.jpg" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" loading="lazy" /></a></div>
<div class='rp4wp-related-post-content'>
<a href='https://www.occitaweb.fr/design/design-horizontal/'>design horizontal pour wordpress</a><p>La modes est au design flat, à défilement verticaux, prés…</p></div>
</li>
</ul>
</div>


Design pour formulaire de contact

Développeur

Réduisez les temps de chargement de vos pages, pour améliorer l&#8217;expérience utilisateur.

Formulaires

Formulaire PHP

Formulaire HTML

Design pour formulaire de contact