I. Introduction▲
Je vais vous présenter étape par étape le même formulaire mais avec
un petit quelque chose en plus. Au final nous aurons un beau formulaire CSS.
Il y aura d'abord une partie XHTML pour rappeler certaines balises
souvent oubliées.
Ensuite viendra la mise en forme du formulaire grâce à du CSS.
Au final, dans un navigateur supportant toutes les propriétés CSS utilisées
dans l'article, ça donnera un formulaire comme ceci :
II. Partie XHTML▲
II-1. Formulaire de base▲
Le formulaire de base que je vais utiliser est tout ce qu'il y a
de plus simple à réaliser.
<form action="#" method="post">
<p>Prénom : <input type="text" name="firstname" /></p>
<p>Nom : <input type="text" name="lastname" /></p>
<p>Sexe : <input type="text" name="gender" /></p>
<p>Date de naissance : <input type="text" name="day" /><input type="text" name="month" /><input type="text" name="year" /></p>
<p>Adresse : <input type="text" name="adress" /></p>
<p>Code postal : <input type="text" name="postalCode" /></p>
<p>Ville : <input type="text" name="city" /></p>
<p>Pays :
<select id="form_country" name="country">
<option value="ca">Canada</option>
<option value="us">États-Unis</option>
<option value="be">Belgique</option>
<option value="fr">France</option>
</select>
</p>
<p>Identifiant : <input type="text" name="login" /></p>
<p>Mot de passe : <input type="password" name="password" /></p>
<p>Confirmer le mot de passe : <input type="password" name="password2" /></p>
<p>Adresse email : <input type="text" name="mail" /></p>
<p>Question secrète : <input type="text" name="question" /></p>
<p>Réponse : <input type="text" name="response" /></p>
<p><input type="submit" name="submit" /></p>
</form>II-2. La balise label▲
La balise label permet d'associer un champ du formulaire à
sa description. Elle permet aussi de donner le focus à ce champ
quand on clique sur son contenu.
Il existe deux manières correctes d'utiliser cette balise.
Soit vous entourez le champ et sa description, soit vous entourez
seulement la description. C'est cette dernière solution qui
sera utilisée.
<form action="#" method="post">
<p>
<label for="form_firstname">Prénom : </label>
<input type="text" id="form_firstname" name="firstname" />
</p>
<p>
<label for="form_lastname">Nom : </label>
<input type="text" id="form_lastname" name="lastname" />
</p>
<p>
<label for="form_gender">Sexe : </label>
<input type="text" id="form_gender" name="gender" />
</p>
<p>
<label for="form_birthday">Date de naissance : </label>
<input type="text" id="form_birthday" name="day" /><input type="text" name="month" /><input type="text" name="year" />
</p>
<p>
<label for="form_address">Adresse : </label>
<input type="text" id="form_address" name="address" />
</p>
<p>
<label for="form_postal_code">Code postal : </label>
<input type="text" id="form_postal_code" name="postal_code" />
</p>
<p>
<label for="form_city">Ville : </label>
<input type="text" id="form_city" name="city" />
</p>
<p>
<label for="form_country">Pays : </label>
<select id="form_country" name="country">
<option value="ca">Canada</option>
<option value="us">États-Unis</option>
<option value="be">Belgique</option>
<option value="fr">France</option>
</select>
</p>
<p>
<label for="form_login">Identifiant : </label>
<input type="text" id="form_login" name="login" />
</p>
<p>
<label for="form_password">Mot de passe : </label>
<input type="password" id="form_password" name="password" />
</p>
<p>
<label for="form_password2">Confirmer le mot de passe : </label>
<input type="password" id="form_password2" name="password2" />
</p>
<p>
<label for="form_mail">Adresse email : </label>
<input type="text" id="form_mail" name="mail" />
</p>
<p>
<label for="form_question">Question secrète : </label>
<input type="text" id="form_question" name="question" />
</p>
<p>
<label for="form_response">Réponse : </label>
<input type="text" id="form_response" name="response" />
</p>
<p>
<input type="submit" name="submit" />
</p>
</form>II-3. La balise fieldset▲
La balise fieldset permet d'entourer un groupe logique
de champs.
Cette balise est complémentée par la balise legend qui
permet de donner un nom à ce groupe logique.
<form action="#" method="post">
<fieldset>
<legend>Informations personnelles</legend>
<p>
<label for="form_firstname">Prénom : </label>
<input type="text" id="form_firstname" name="firstname" />
</p>
<p>
<label for="form_lastname">Nom : </label>
<input type="text" id="form_lastname" name="lastname" />
</p>
<p>
<label for="form_gender">Sexe : </label>
<input type="text" id="form_gender" name="gender" />
</p>
<p>
<label for="form_birthday">Date de naissance : </label>
<input type="text" id="form_birthday" name="day" /><input type="text" name="month" /><input type="text" name="year" />
</p>
<p>
<label for="form_address">Adresse : </label>
<input type="text" id="form_address" name="address" />
</p>
<p>
<label for="form_postal_code">Code postal : </label>
<input type="text" id="form_postal_code" name="postal_code" />
</p>
<p>
<label for="form_city">Ville : </label>
<input type="text" id="form_city" name="city" />
</p>
<p>
<label for="form_country">Pays : </label>
<select id="form_country" name="country">
<option value="ca">Canada</option>
<option value="us">États-Unis</option>
<option value="be">Belgique</option>
<option value="fr">France</option>
</select>
</p>
</fieldset>
<fieldset>
<legend>Compte</legend>
<p>
<label for="form_login">Identifiant : </label>
<input type="text" id="form_login" name="login" />
</p>
<p>
<label for="form_password">Mot de passe : </label>
<input type="text" id="form_password" name="password" />
</p>
<p>
<label for="form_password2">Confirmer le mot de passe : </label>
<input type="password" id="form_password2" name="password2" />
</p>
<p>
<label for="form_mail">Adresse email : </label>
<input type="password" id="form_mail" name="mail" />
</p>
<p>
<label for="form_question">Question secrète : </label>
<input type="text" id="form_question" name="question" />
</p>
<p>
<label for="form_response">Réponse : </label>
<input id="form_response" name="response" />
</p>
</fieldset>
<p>
<input type="submit" name="submit" />
</p>
</form>II-4. La balise optgroup▲
La balise optgroup s'utilise dans une balise select
et permet de grouper les options de cette dernière.
Pour spécifier le nom du groupe, il faut utiliser l'attribut
label de optgroup.
<form id="monForm" action="#" method="post">
<fieldset>
<legend>Informations personnelles</legend>
<p>
<label for="form_firstname">Prénom : </label>
<input type="text" id="form_firstname" name="firstname" />
</p>
<p>
<label for="form_lastname">Nom : </label>
<input type="text" id="form_lastname" name="lastname" />
</p>
<p>
<label for="form_gender">Sexe : </label>
<input type="text" id="form_gender" name="gender" />
</p>
<p>
<label for="form_birthday">Date de naissance : </label>
<input type="text" id="form_birthday" name="day" /><input type="text" name="month" /><input type="text" name="year" />
</p>
<p>
<label for="form_address">Adresse : </label>
<input type="text" id="form_address" name="address" />
</p>
<p>
<label for="form_postal_code">Code postal : </label>
<input type="text" id="form_postal_code" name="postal_code" />
</p>
<p>
<label for="form_city">Ville : </label>
<input type="text" id="form_city" name="city" />
</p>
<p>
<label for="form_country">Pays : </label>
<select id="form_country" name="country">
<optgroup label="Amérique">
<option value="ca">Canada</option>
<option value="us">États-Unis</option>
</optgroup>
<optgroup label="Europe">
<option value="be">Belgique</option>
<option value="fr">France</option>
</optgroup>
</select>
</p>
</fieldset>
<fieldset>
<legend>Compte</legend>
<p>
<label for="form_login">Identifiant : </label>
<input type="text" id="form_login" name="login" />
</p>
<p>
<label for="form_password">Mot de passe : </label>
<input type="password" id="form_password" name="password" />
</p>
<p>
<label for="form_password2">Confirmer le mot de passe : </label>
<input type="password" id="form_password2" name="password2" />
</p>
<p>
<label for="form_mail">Adresse email : </label>
<input type="text" id="form_mail" name="mail" />
</p>
<p>
<label for="form_question">Question secrète : </label>
<input type="text" id="form_question" name="question" />
</p>
<p>
<label for="form_response">Réponse : </label>
<input type="text" id="form_response" name="response" />
</p>
</fieldset>
<p>
<input type="submit" name="submit" />
</p>
</form>III. Partie CSS▲
Certaines propriétés CSS que j'ai utilisées ne sont pas compatibles IE 6 et ne marchent pas très bien sur IE 7. (exemple: focus qui n'est pas pris en compte et hover qui ne l'est qu'à moitié).
III-1. Fieldset▲
Ici, on va fixer la taille maximale du formulaire pour ne pas que les cadres des éléments fieldset soient trop grands. On les écarte aussi un peu entre eux pour bien séparer les groupes logiques. Ensuite on peut changer l'aspect de la bordure et la rendre plus discrète. Il y a moyen de mettre en forme l'élément legend, par exemple un texte plus grand, en gras, avec des bordures gauche et droite comme dans l'exemple ci-dessous. On applique un hover à l'élément fieldset pour faire joli.
#monForm
{
width: 60%;
}
#monForm p
{
margin: 2px 0;
}
/* fieldset , legend */
#monForm fieldset
{
margin-bottom: 10px;
border: #CCC 1px solid;
}
#monForm fieldset:hover
{
background-color: #FFF;
}
#monForm fieldset legend
{
padding: 0 10px;
border-left: #CCC 1px solid;
border-right: #CCC 1px solid;
font-size: 1.2em;
color: #999;
}III-2. Label▲
Pour bien séparer les éléments label des champs, on va leur
mettre une couleur de fond. Il ne faut pas oublier d'annuler cette
couleur de fond pour le label correspondant aux boutons. On peut
aussi mettre un hover sur les éléments label, toujours pour
faire joli.
Si on veut pouvoir spécifier une taille pour les éléments label,
il faut mettre l'affichage avec display en block.
Pour aligner les champs de texte avec leur label on met en
float: left les éléments label.
On aligne ensuite le texte à droite et on applique au texte un
letter-spacing pour une meilleure visibilité.
/* Label */
#monForm label
{
background-color: #FFCC66;
display: block;
width: 39%;
float: left;
padding-right: 1%;
text-align: right;
letter-spacing: 1px;
}
#monForm label:hover
{
font-weight: bold;
}
#monForm .form_label_nostyle
{
background: none;
}III-3. Input▲
Naturellement, on va modifier la taille des champs pour les avoir
tous à la même longueur.
On met en couleur le fond des champs au survol de la souris
grâce à un hover et on garde ce
fond coloré quand on est dans le champ grâce à un focus.
/* Input */
#monForm input, #monForm select
{
margin-left: 1%;
width: 58%;
border: #CCC 1px solid;
}
#monForm input:hover, #monForm select:hover, #monForm input:focus, #monForm select:focus
{
border: #999 1px solid;
background-color: #DDEEFF;
}
#monForm .form_input_day_month
{
width: 3%;
}
#monForm .form_input_year
{
width: 6%;
}III-4. Bouton submit et reset▲
On met en couleur verte et rouge respectivement le bouton submit
et le bouton reset. Ensuite il y a moyen de changer le pointeur
de forme au survol de la souris sur le bouton grâce à cursor.
/* button submit */
#monForm input[type="submit"]
{
border: #DDEEFF 1px solid;
width: 27%;
}
#monForm input[type="submit"]:hover
{
background-color: #66CC33;
cursor: pointer;
}
#monForm input[type="reset"]
{
border: #DDEEFF 1px solid;
width: 27%;
}
#monForm input[type="reset"]:hover
{
background-color: #E6484D;
cursor: pointer;
}IV. Conclusion▲
Les quelques balises présentées dans cet article ne sont pas obligatoires
mais permettent à votre formulaire d'être accessible et d'être mieux présenté.
Quant à la mise en forme et aux quelques effets ajoutés au formulaire,
il n'y a guère besoin de Javascript, le CSS suffit de lui-même.
IV-1. Remerciements▲
Tous mes remerciements à Bisûnûrs, Kerod et YoguiYogui pour leur relecture.
