Mise en forme CSS d'un formulaire

Les formulaires sont tristounets, et leur mise en forme n'est pas très jolie.
En voici la preuve :

Grâce aux feuilles de style, on peut facilement égayer tout cela.

Exemple

Pour commencer, regardons le code (x)html de plus près :

Source (x)html

<form action="toto.php" method="post" >

<fieldset>
 <legend> A propos des CSS : </legend>
   <p>Savez-vous ce que veut dire CSS ? : </p>
     <label for="oui" class="inline">oui</label>
     <input type="radio" name="CSS" value="oui" id="oui"
     checked="checked" /> 
     <label for="non" class="inline">non</label>
     <input type="radio" name="CSS" value="non" id="non" />

  <label for="utilise">Si oui, les utilisez-vous plutôt : </label>
   <select name="utilise" id="utilise">
   <option value="toujours"> toujours</option>
   <option value="parfois"> parfois</option>
   <option value="jamais"> jamais</option>
   </select>
</fieldset>

<fieldset>
 <legend>Vos coordonnées :</legend>
  <label for="email">Votre email :</label>
   <input type="text" name="email" size="20" 
   maxlength="40" value="email" id="email" />

  <label for="comments">Vos commentaires :</label>
   <textarea name="comments" id="comments" cols="20" rows="4">
   </textarea>
</fieldset>

 <p>
 <input type="submit" value="Envoyer" />
 <input type="reset" value="Annuler" />
 </p>

</form>

On constate donc les présences des balises <form>, <fieldset> (pour regrouper les différentes zones de formulaire), <legend> (pour identifier chaque fieldset), <label> (étiquette pour chaque champ), <input>, <select>, <option> et <textarea>.
Ce sont elles qui seront déclarées dans la feuille de style pour la mise en forme du formulaire.

Les styles (Code css) sont à enregistrer dans une feuille de style externe selon la procédure indiquée dans le tutoriel « Feuille de style de base »

Code CSS

body {
 font-family:"trebuchet ms",sans-serif;
 font-size:90%;
 }
form {
 background-color:#FAFAFA;
 padding:10px;
 width:350px;
 }
fieldset {
 padding:20px;
 margin-bottom:10px;
 }
legend {
 color:#a0522d;
 font-weight:bold
 }
label {
 margin-top:20px;
 display:block;
 }
label.inline {
 display:inline
 }
input {
 border:1px solid black;
 background-color:#A6BEDE;
 }
input[type=radio] {
 margin-right:50px;
 background-color:transparent;
 border:none;
 }
select, option {
 background-color:#A6BEDE;
 }
textarea {
 border:1px solid black;
 background-color:#A6BEDE;
 }

• Le display:block indiqué dans le label permet de passer à la ligne automatiquement.
• Le display:inline indiqué dans le label.inline... pour éviter de passer à la ligne dans certains cas (ici pour les boutons radios)
• Le input[type=radio] permet de styliser uniquement les boutons radio (c'est à dire les cases à cocher).

Le résultat sera alors le suivant :

Compléments

Rollover

L'apparence des boutons "envoyer" et "annuler" peut être rendue plus dynamique de la façon suivante :

Code CSS

input[type=submit], input[type=reset] {
 border:2px outset #A6BEDE;
 font-weight:bold;
 cursor:pointer;
 }
input[type=submit]:hover, input[type=reset]:hover {
 border:2px outset white;
 background-color:white;
 }
input[type=submit]:active, input[type=reset]:active {
 border:2px inset #A6BEDE;
 background-color:#A6BEDE;
 color:black;
 } 

Même principe que précedement pour spécifier que l'on style les boutons du type submit et reset : on indique entre crochets le type ciblé.

Le premier style concerne l'apparence du bouton au "repos", le second (input:hover) correspond au bouton survolé, et le dernier (input:active) est celui du bouton enfoncé.

Le résultat devrait être alors le suivant :

Attention !

Les pseudos-éléments :hover et :active ne sont supportées par MSIE6 que pour les liens (a); idem pour :active avec MSIE7.

Focus

Il est possible aussi d'attribuer un effet sur le focus des champs. Mais cette propriété CSS, pourtant si pratique, n'est pas implantée par MSIE avant la version 8.

Code CSS

*:focus {
 background-color:white;
 }

Résultat attendu :

Testez la mise en forme de ce formulaire.

Lectures complémentaires

• Comment ne pas styler les éléments d'un formulaire ? (hé hé hé... Alsacréations !)
• Des formulaires plus simples (Fred Cavazza)
• CSS-Based Form

Haut