Personnalisation d'un formulaire XHTML avec CSS

Adrien Pellegrini

Cet article vous explique comment mettre en forme un formulaire avec du CSS sans oublier les balises label, fieldset et optgroup.

- Titre : Personnalisation d'un formulaire XHTML avec CSS

- Auteur : Adrien Pellegrini

- Parution : 13 novembre 2007

- Licence : Copyright ® 2007 Adrien Pellegrini. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Introduction

- II. Partie XHTML

- II-1. Formulaire de base

- II-2. La balise label

- II-3. La balise fieldset

- II-4. La balise optgroup

- III. Partie CSS

- III-1. Fieldset

- III-2. Label

- III-3. Input

- III-4. Bouton submit et reset

- IV. Conclusion

- IV-1. Remerciements

- IV-2. Liens

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>

Voir le formulaire

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>

Voir le formulaire

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>

Voir le formulaire

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>

Voir le formulaire

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;
}

Voir le formulaire

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;
}

Voir le formulaire

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%;
}

Voir le formulaire

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;
}

Voir le formulaire

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 Yogui pour leur relecture.

IV-2 - Liens

Personnalisation d'un formulaire XHTML en Javascript
Introduction à l'XHTML