Jolis input dans un formulaire web

Les Formulaires web sont souvent très classiques : un texte descriptif et une austère boîte de saisie. Je vais ici vous livrer un petit tutoriel pour vous permettre de personnaliser tout ça. Nous devrions donc arriver à ceci : Notez que ce formulaire devra bien entendu être conforme XHTML/CSS, et que nous ne personnaliserons (cette fois) seulement les zones de texte.

Inkscape

Nous allons d'abord dessiner notre feuille (contenant la description et la zone de texte) avec l'aide d'Inkscape. Ouvrons-le et créons un nouveau document, donnons lui comme dimension 550 pixels de large sur 50 de haut (menu > Fichier > Propriété du Document). Voici les différentes étapes du dessin (les explications sont plus bas).

1. dessinons un rectangle noir d'environ 500 pixels de large sur 25
2. copions et collons le. Affectons un dégradé blanc vers gris clair à notre nouveau rectangle avec une répétition de type "réflection" (dans la fenêtre "Remplissage et contours"). à l'aide de l'outil "édition des "dégradés" (raccourci clavier : Ctrl+F1), Plaçons la poignée claire de notre dégradé au centre de l'objet, les bords droit et gauche du rectangle deviendront alors sombres.
3. Sélectionnons le rectangle gris, transformons le en chemin (menu "Chemin > Objet en chemin"). À l'aide de l'outil Éditer les nœuds (raccourci clavier : F2), sélectionnons les deux nœuds du haut ^[1]. Ajoutons alors un nœud grâce à l'icône prévue à cet effet . Faisons la même chose avec les deux nœuds du bas.
4. Sélectionnons maintenant les deux nœuds du bas toujours avec l'outil "Éditez les nœuds", avec la touche fléchée bas de notre clavier, déplaçons deux fois notre sélection vers le bas et rendons les nœuds symétriques avec .
5. Attaquons maintenant notre rectangle noir. Sélectionnons le, puis dans la fenêtre "Remplissage et contours" mettons 2 à flou et 50 en opacité.
6. Sélectionnons maintenant nos deux objets, et alignons-les au centre du document avec la fenêtre aligner et distribuer. Pour le faire, dans la liste déroulante "relative à" choisissons "page".

Enregistrons enfin notre document, la partie Inkscape est finie...

Avec Gimp maintenant

Nous allons utiliser Gimp pour rajouter la description de notre zone de texte, de nos deux zones de texte même. Ouvrons notre document SVG avec Gimp, une fenêtre comme ci-dessous devrais apparaître, il suffit de valider (les dimensions étant les bonnes).

À partir de la, ajoutons un calque pour pouvoir mettre la description, par exemple "Votre Prénom". Nous pouvons même gommer un petit peu les lettres avec un pinceau fin et rendre ce calque un peu transparent. Enregistrons cette image en png avec pour nom prenom.png et faisons de même pour le nom.

Il ne reste plus qu'à intégrer tout ça en XHTML/CSS...

L'intégration

Le fichier XHTML

Voici donc le code relatif à notre formulaire :

<form id="formulaire" action="#pr" method="post">
<h2>Qui êtes-vous?</h2>	
   <fieldset>
      <p class="nom"><label for="nom">Votre nom</label><input name="nom" type="text"/></p>
      <p class="prenom"><label for="prenom">Votre prénom</label><input name="prenom" type="text"/></p>
      <p><input type="submit" class="submit" value="envoyer" /></p>
   </fieldset>
</form>

Notre formulaire est mis dans un bloc div (<form id="formulaire">...</form>). Nous mettons notre titre grâce aux balises <h2>titre</h2>, notre formulaire (<fieldset>...<fieldset>) contient 2 champs : un pour le nom et un pour le prénom entouré d'une balise <p>...</p>. Pourquoi? tout simplement parce que c'est grâce à <p> que nous allons intégrer notre image créée précédemment...

Chaque éléments <p> contient deux autres éléments : <label>..</label>, la description de notre champs et <input/>, la zone de saisie. Nous cacherons la description (puisque elle est visible sur l'image elle-même...). Nos deux éléments <p> ont des classe différentes, nous pourrons dont leurs appliquer deux présentation différentes.

Le CSS

Dernière étape pour la création de notre formulaire, c'est ici que nous allons assembler tous les éléments... Le voici donc (oui, j'ai une bien curieuse façon d'écrire les fichiers CSS...) :

/*-------------------
/ Formulaire
/-----------------*/
/*Layout*/
#formulaire			{margin:0 55px 25px 75px;}
#formulaire p			{height:33px; width:500px; padding:17px 25px 0 25px;}
#formulaire .nom		{position:relative; left:23px;}
#formulaire .prenom		{position:relative; left:7px; margin-top: 10px}
#formulaire label		{display:none;}
#formulaire .nom input		{margin-left:150px;}
#formulaire .prenom input	{margin-left:180px;}

/*Polices*/
#formulaire input[type="text"]	{font-size:1.2em;}

/*Habillage*/
#formulaire h2			{color:#b00;}
#formulaire .nom		{background:url(../imgs/nom.png) no-repeat top left;}
#formulaire .prenom		{background:url(../imgs/prenom.png) no-repeat top left;}
#formulaire input[type="text"]	{color:#b00; border:none; background:none;}

Pour ce qui est du layout, débrouillions-nous pour que la taille d'un élément <p> soit égale à la taille de notre image (550 par 50 pixels avec comme principe taille du bloc + padding forme les dimension de mon bloc). Pour que nos deux champs paraissent moins droits, nous allons les positionner différemment grâce au positionnement relatif : position:relative; en définissant une position par rapport au côté gauche du bloc <p> avec left:23px; pour l'un et left:7px histoire qu'ils ne soient pas parfaitement alignés. Nous n'afficherons pas les balises <label> avec #formulaire label{display:none;}. Enfin, étant donné que la place prise par les description dans les images de fond n'est pas la même pour nom et prénom (Votre Prénom est plus long que Votre Nom), les marges à gauche des champs de saisie n'est pas la même (150px pour nom et 180px pour prénom).

Pas besoin de s'attarder sur le chapitre polices, passons directement à l'habillage... La couleur du titre et du texte entré dans les zones de texte est rouge (color:#b00;). Pour les balises <p>, chacune des deux balises contient des fonds différents (un pour le nom et un pour le prénom). Nous avons donc deux lignes différentes : #formulaire .nom et #formulaire .prenom avec à chaque fois un fond différent. Pour ce qui ai des zones de texte, enlevons le fond et le contour pour qu'elles ne se voient plus...

Conclusion

Nous voilà maintenant armés pour personnaliser les zones de saisie de nos formulaires. La méthode fonctionne sur la plupart des navigateurs (la majorité en fait). Je l'ai testé avec avec Firefox 2 et 3, Internet Explorer 7, Opera 9.5, Safari 3.

Téléchargez ici le fichier svg et ici le fichier zip contenant les fichier HTML, CSS et png.