IX. Mise en forme CSS d'un formulaire▲
Fonctionne avec :
- FireFox
- NS 6/7
- Mozilla 1.x
- Opéra 7 et plus
- MSIE 5.5 et plus
- Safari
Attributs utilisés :
- background-color
- border
- color
- font-family, font-size, font-weight
- width
Les formulaires sont tristounets. En voici la preuve :
![Image non disponible](./images/form.gif)
Grâce aux feuilles de style, on peut facilement égayer tout cela.
IX-A. Exemple▲
Pour commencer, regardons le code (X)HTML de plus près :
<form action
=
"toto.php"
method
=
"post"
>
<p>
<label>Savez-vous ce que veut dire CSS ? : </label>
<input type
=
"radio"
name
=
"CSS"
value
=
"oui"
checked
=
"checked"
/>
oui
<input type
=
"radio"
name
=
"CSS"
value
=
"non"
/>
non
</p>
<p>
<label>Si oui, les utilisez-vous plutôt : </label>
<select name
=
"utilise"
>
<option value
=
"toujours"
>
toujours</option>
<option value
=
"parfois"
>
parfois</option>
<option value
=
"jamais"
>
jamais</option>
</select>
</p>
<p>
<label for
=
"email"
>
Votre email :</label><br />
<input type
=
"text"
name
=
"email"
size
=
"20"
maxlength
=
"40"
value
=
"email"
id
=
"email"
/>
</p>
<p>
<label for
=
"comments"
>
Vos commentaires :</label><br />
<textarea name
=
"comments"
id
=
"comments"
cols
=
"20"
rows
=
"4"
></textarea>
</p>
<p>
<input type
=
"submit"
value
=
"Envoyer"
/>
<input type
=
"reset"
value
=
"Annuler"
/>
</p>
</form>
On constate donc les présences des balises <p>,
<form>, <label>, <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 ici.
p
{
font-family:
"trebuchet ms"
,
sans-serif
;
font-size:
80
%;
}
form
{
background-color:
#F5F5F5
;
padding:
10
px;
width:
350
px;
}
label
{
font-family:
"trebuchet ms"
,
sans-serif
;
font-weight:
bold
}
input
{
border:
1
px solid
black
;
background-color:
red
;
font-family:
"trebuchet ms"
,
sans-serif
;
color:
white
;
}
select,
option
{
background-color:
red
;
color:
white
;
}
textarea
{
border:
1
px solid
black
;
background-color:
red
;
font-family:
"trebuchet ms"
,
sans-serif
;
color:
white
;
}
Le résultat sera alors le suivant :
IX-B. Compléments▲
IX-B-1. Rollover▲
L'apparence des boutons "envoyer" et "annuler" peut être rendue plus dynamique de la façon suivante :
<p>
<input type
=
"submit"
value
=
"Envoyer"
class
=
"bouton"
/>
<input type
=
"reset"
value
=
"Annuler"
class
=
"bouton"
/>
</p>
input.bouton
{
border:
2
px outset
red
;
font-weight:
bold
;
cursor:
pointer
;
}
input.bouton
:
hover
{
border:
2
px outset
white
;
background-color:
white
;
color:
red
;
}
input.bouton
:
active
{
border:
2
px inset
red
;
background-color:
red
;
color:
white
;
}
Le premier style concerne l'apparence du bouton au "repos", le second (input.bouton:hover) correspond au bouton survolé, et le dernier (input.bouton:active) est celui du bouton enfoncé.
Le résultat devrait être alors le suivant :
![Image non disponible](./images/bout2.gif)
Les pseudos-classes :hover et :active ne sont supportées par MSIE6 que pour les liens (a); idem pour :active avec MSIE7.
IX-B-2. 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).
input:
focus
,
textarea:
focus
{
background-color:
white
;
color:
red
;
}
Exemples de mises en forme de formulaires grâce aux CSS : CSS-Based Form.