Formulaire en CSS3 - Html5

 

La création de formulaire n'est pas une partie de plaisir pour certain, mais personnellement j'aime bien en faire.
Depuis de l'eau à coulée sous les ponts, la conception de formulaire en Html5 associé au CSS3 m'a donné, pour moi, plus envie d'en créer.
De plus avec les nouveaux attributs donnés au champs, ces derniers interagissent avec la saisie de l'utilisateur, pour le peu que l'on ait utilisé un (pattern), c'est à dire une expréssion réguliére exprimant le format souhaité pour un champ donné.
Ce n'est pas pour autant qu'il faut omettre la vérification des champs coté serveur.
Ce que vous trouverez dans cette page, est une façon de styliser un formulaire, et dieu sait qu'il en existe beaucoup.
Toutefois il ne faudra pas non plus oublié les navigateurs (modernes) pour leurs spécificités.

Ci-dessous un exemple de formulaire, avec l'utilisation d'attributs dans les champs, exemple le champ (nom) possède l'attribut (required -> obligatoire, et autofocus, qui permet d'ajouter le curseur dans le champ à l'ouverture de la page, ainsi que l'attribut (placeholder) permettant d'informer l'utilisateur ce qu'il doit saisir dans ce champ, il en existe bien sûr bien d'autres.

                        <fieldset>
                            <legend>&nbsp;Demande d'informations&nbsp;</legend>
                                <form action="#" method="post">
                                    <label for="nom" id="label_nom">&nbsp;Nom :</label> 
                                    <input type="text" name="nom" id="nom" value="" placeholder="Votre nom" required autofocus />
                                    <br /><br />
                                    <label for="prenom" id="label_prenom">&nbsp;Pr&eacute;nom :</label> 
                                    <input type="text" name="prenom" id="prenom" value="" placeholder="Votre prénom" required />
                                    <br /><br />
                                    <input type="hidden" name="submitted" id="submitted" value="true" />
                                    <button class="buttonc icon" type="submit"><span>Envoyer votre message</span></button>
                                </form>
                        </fieldset>
              

Le code CSS ci-dessous permet de styliser le formulaire, en effet si on affiche le formulaire tel quel, il ressemblerait à un formulaire classique.
Si vous appliquez ce code CSS à ce formulaire, vous verrez que les balises (label), les champs (input), le bouton sont mis en forme avec du CSS 3.
Toutefois, il subsiste une différence d'affichage selon le navigateur en ce qui concerne l'attribut (placeholder).
Je n'ai pris en compte que les navigateurs suivants : (Firefox, Chrome, Maxthon3, Maxthon4 et Opéra), pour IE sans commentaires.

                      legend{font-weight:bold;color:#333;}
                      fieldset{width:600px;border:1px #c1c0c0 solid;margin:0 20px 20px 30px;padding:20px;}
                      
                       label{width:150px; display:block;float:left;font-size:11px;font-weight:bold;color:#fff;height:25px;line-height:25px;}
                       #label_nom{
                          padding:0 0 0 30px;
                          background: url(../images/user.png) no-repeat  5px 5px, -moz-linear-gradient(top, #C9C9C9 0%, #68686E 100%);
                          background: url(../images/user.png) no-repeat  5px 5px, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C9C9C9), color-stop(100%, #68686E));
                          background: url(../images/user.png) no-repeat  5px 5px, -webkit-linear-gradient(top, #C9C9C9 0%, #68686E 100%);
                          background: url(../images/user.png) no-repeat  5px 5px, -o-linear-gradient(top, #C9C9C9 0%, #68686E 100%);	
                          background: url(../images/user.png) no-repeat  5px 5px, linear-gradient(top, #C9C9C9 0%, #68686E 100%);
                          background: url(../images/user.png) no-repeat  5px 5px, -ms-linear-gradient(top, #C9C9C9 0%, #68686E 100%);}
                      
                       #label_prenom{
                          padding:0 0 0 30px;
                          background: url(../images/user.png) no-repeat  5px 5px, -moz-linear-gradient(top, #C9C9C9 0%, #68686E 100%);
                          background: url(../images/user.png) no-repeat  5px 5px, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C9C9C9), color-stop(100%, #68686E));
                          background: url(../images/user.png) no-repeat  5px 5px, -webkit-linear-gradient(top, #C9C9C9 0%, #68686E 100%);
                          background: url(../images/user.png) no-repeat  5px 5px, -o-linear-gradient(top, #C9C9C9 0%, #68686E 100%);	
                          background: url(../images/user.png) no-repeat  5px 5px, linear-gradient(top, #C9C9C9 0%, #68686E 100%);
                          background: url(../images/user.png) no-repeat  5px 5px, -ms-linear-gradient(top, #C9C9C9 0%, #68686E 100%);}
                      
                      input[type=text]{border:1px solid #c1c0c0;font-weight:bold;font-size:11px;color:#fff;width:200px;height:auto;padding:5px 0 5px 30px;}
                      input[type=text]:required{background: #989898 url(../images/r.png) no-repeat 98% center;}
                      input[type=text]::-moz-placeholder { color:#fff;} 
                      input[type=text]:-moz-placeholder { color:#fff;} 
                      input[type=text]:focus:valid, div#boxcontact textarea:focus:valid{
                          background: #c6c6c6 url(../images/valid.png) no-repeat 98% center;
                          border-color:#aaa;
                          color:#fff;
                          box-shadow:0 0 10px #555;
                          -moz-box-shadow:0 0 10px #555;
                          -webkit-box-shadow:0 0 10px #555;}
                      
                      input[type=text]:required:valid{
                          background:url(../images/valid.png) no-repeat 200px 5px #F0F0EF;
                          background:url(../images/valid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */
                          background:url(../images/valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */
                          background:url(../images/valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */
                          background:url(../images/valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */
                          background:url(../images/valid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */
                          color:#333;}		
                      
                      input[type=text]:focus{
                          -webkit-transform: scale(1.1);
                          -moz-transform: scale(1.1);
                          transform: scale(1.1);
                          -moz-box-shadow: 5px 3px 1px #ccc;
                          -webkit-box-shadow: 5px 3px 1px #ccc;
                          box-shadow: 7px 7px 2px #ccc;
                          text-shadow:1px 1px 3px #777;}
                      
                       .buttonc{
                      background-image: -moz-linear-gradient(top, #ffffff, #dbdbdb);
                      background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffffff),color-stop(1, #dbdbdb));
                      filter: progid:DXImageTransform.Microsoft.gradient (startColorStr='#ffffff', EndColorStr='#dbdbdb');
                      -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorStr='#ffffff', EndColorStr='#dbdbdb')";
                      border: 1px solid #fff;
                      -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
                      -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
                      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.4);
                      border-radius:18px;-webkit-border-radius:18px;-moz-border-radius:18px;
                      padding:5px 15px;text-decoration:none;text-shadow: #fff 0 1px 0;float:left;margin-right:15px;margin-bottom:15px;
                      display: block;color:#597390;line-height:24px;font-size:12px;font-weight:bold;}
                      
                       .buttonc:hover{
                      background-image: -moz-linear-gradient(top, #ffffff, #eeeeee);
                      background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #ffffff),color-stop(1, #eeeeee));
                      filter: progid:DXImageTransform.Microsoft.gradient (startColorStr='#ffffff', EndColorStr='#eeeeee');
                      -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorStr='#ffffff', EndColorStr='#eeeeee')";
                      color:#000;display: block;}
                      
                       .buttonc:active{
                      background-image: -moz-linear-gradient(top, #dbdbdb, #ffffff);
                      background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, #dbdbdb),color-stop(1, #ffffff));
                      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff');
                      -ms-filter: "progid:DXImageTransform.Microsoft.gradient (startColorStr='#dbdbdb', EndColorStr='#ffffff')";
                      text-shadow: 0px -1px 0 rgba(255, 255, 255, 0.5);
                      margin-top: 1px;}
                      
                       .buttonc{border: 1px solid #979797;}
                       .buttonc.icon {padding-left: 11px;}
                       .buttonc.icon span{padding-left: 36px;background: url(../images/mail.png) no-repeat 0 -4px;}
             

La démo utilise les mêmes codes que ceux cités dans les onglets de code.



Quelques liens intéressants à lire.

  • http://sldesign.openwab.com/2010/08/07/formulaires-html5-quoi-de-neuf/
  • http://html5test.com/
  • http://html5pattern.com/Names
  • http://css.4design.tl/polyfills-fallbacks-html5/


Ci-dessous le lien vers la démo. Démo