Mise en forme CSS d'un formulaire

Comment styler et mettre en forme entièrement un formulaire grâce au CSS?

Nous utilisons quasiment tous des formulaires sur nos sites et pour en effectuer la mise en forme, on a tendance à utiliser une bonne dose de codes (X)HTML, du javascript et je ne sais quoi d'autre encore...

Dans ce tutoriel, nous utiliserons juste le code permettant de créer le formulaire et du CSS ... rien de plus !

Pour la mise en forme d'un formulaire en CSS, on utilise dans un premier temps les balises qui permettent de déclarer les différents élements qui le compose tel que : <form>, <label>, <input>, <option>, <fieldset> etc..., puis on vient y ajouter quelques class CSS sur certains élements.

Voici ce que donne mon formulaire :


Formulaire de contact :
Vos coordonnées :

Le code du formulaire :

<form action="#" method="post">
<fieldset>
 
<legend>Formulaire de contact : </legend>
<label class="question">Souhaitez vous recevoir une copie ? : </label>
 
<label for="oui" class="en-ligne">oui</label>
<input name="copie" value="oui" id="oui" checked="checked" type="radio" /> 
<label for="non" class="en-ligne">non</label>
<input name="copie" value="non" id="non" type="radio" />
 
<label for="why" class="question">Si non, pourquoi ?: </label>
<select name="why">
<option value="pas_envie"> pas envie</option>
<option value="parce_que"> parce que</option>
<option value="pourquoi_pas"> pourquoi pas</option>
</select>
 
</fieldset>
 
<fieldset>
 
<legend>Vos coordonnées :</legend>
 
<label for="email">Votre email :</label>
<input name="email" size="20" maxlength="40" value="" type="text" class="decole-curseur" />
<label for="message">Votre message :</label>
<textarea name="message" cols="20" rows="4"></textarea>
 
</fieldset>
 
<input value="Envoyer" type="submit" />
<input value="Annuler" type="reset" />
 
</form>
La partie CSS :
form {
background-color:#e5eeff;
padding:10px;
width:500px;
}
fieldset {
border: 1px solid #DCD069 ;
padding:5px;
margin:5px;
}
legend {
font-weight:bold;
color:#FF0096;
}
label {
padding :5px;
display:block;
}
label.en-ligne {
display:inline;
}
label.question{
color:#85AC1C;
font-weight:bold;
}
input { 
border:1px solid #000;
background:#FFF;
}
input:focus { 
background : #FFFDEA; 
}
input[type=radio] {
margin-right:20px;
}
input.decole-curseur {
padding-left:20px;
}
input[type=submit], input[type=reset] {
border:1px solid #CC3B1F;
font-weight:bold;
cursor:pointer;
}
input[type=submit]:hover, input[type=reset]:hover {
background-color:#CC3B1F;
}
input[type=submit]:active, input[type=reset]:active {
background-color:#000;
color:white;
} 
textarea {
background : #FFF; 
border : 1px solid #000; 
width : 95%; 
margin : .5em 0; 
padding : 4px;
}
textarea:focus { 
background : #FFFDEA;
}
option,select {
background-color:#85AC1C;
}
option,select:hover{
background-color:#FF0096;
}
Quelques explications s'imposent :
label {
padding :5px;
display:block;
}

On attribue un display:block à l'élément label pour effectuer un retour à la ligne automatique de chaque élément. On évite ainsi l'utilisation de la balise <br/> ou <p></p> ou encore l'utilisation d'un <div>.

label.en-ligne {
display:inline;
}

Cette class permet (en quelque sorte) d'annuler le retour à la ligne imposer sur l'élément label précédent et ainsi mettre en ligne (sur une seule ligne) l'élément auquel est attribué cette class. En gros, on aligne horizontalement les boutons radio !

input:focus { 
background : #FFFDEA; 
}

input:focus permet de changer la couleur de fond lorque l'élément qui l'utilise est active. Vous pouvez voir cette effet en cliquant simplement sur le champ email ou message.

input[type=radio] {
margin-right:20px;
border:none;
background-color:transparent;
}

Cette class permet d'attribuer un style directement aux boutons de type radio. On place une marge à droite de chaque boutton de 20 pixels, on supprime les bordures qui entourent les bouttons (sous IE)  et on laisse passer la couleur de fond de notre formulaire (sous IE).

input.decole-curseur {
padding-left:20px;
}

Cette class CSS un peut spécial, permet tout simplement de "décoller" le curseur du champ "Votre email" de quelques pixels vers la droite (je le trouve personnellement trop collé à gauche ^^).

input[type=submit]:active, input[type=reset]:active {
background-color:#000;
color:white;
}

Cette class, et plus particulièrement l'élément "active", permet entre autre de changer la couleur du bouton une fois celui-ci activé. Cette effet ne fonctionne pas sous Internet Explorer.

option, select {
background-color:#85AC1C;
}
option, select:hover{
background-color:#FF0096;
}

Ces 2 class permettent de changer la couleur de fond de la liste déroulante (ne fonctionne pas sous Internet Explorer).


Styler un formulaire en CSS

Voila, vous en savez maintenant un peut plus sur la façon de proceder pour mettre en forme un formulaire en utilisant uniquement du CSS .

Voir/déposer un commentaire (1) | Signaler un problème