CSS Débutants

Vous êtes ici > CSS débutants | Mise en forme CSS d'un formulaire

Mise en forme CSS d'un formulaire

Les formulaires sont tristounets.
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">oui</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 (source css) sont à enregistrer dans une feuille de style externe selon la procédure indiquée dans le tutoriel « Feuille de style de base »

Source CSS

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

• 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 :

Source 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 (même la version 7).

Code CSS

*:focus {
background-color:white;
}

Résultat attendu :

Testez la mise en forme de ce formulaire.

Exemples de mises en forme de formulaires grâce aux CSS

• CSS-Based Form

Haut de page