<hier>WEBLOG</hier>

Jeudi 07 août 2003 | link

Mise en forme CSS d'un formulaire

Les formulaires sont tristounets.
En voici la preuve :

Capture d'écran d'un formulaire de base

Grâce aux feuilles de style, on peut facilement égayer tout cela. Pour commencer, regardons le code (x)html de plus près :

Source (x)html

<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>Votre email :</label><br />
<input type="text" name="email" size="20" 
maxlength="40" value="email" />
</p>
<p>
<label>Vos commentaires :</label><br />
<textarea name="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.

Par exemple comme ceci :

Source CSS

p {
font-family:"trebuchet ms",sans-serif;
font-size:80%;
}
form {
background-color:#F5F5F5;
padding:10px;
width:350px;
}
label {
font-family:"trebuchet ms",sans-serif;
font-weight:bold
}
input {
border:1px solid black;
background-color:red;
font-family:"trebuchet ms",sans-serif;
color:white;
}
select, option {
background-color:red;
color:white;
}
textarea {
border:1px solid black;
background-color:red;
font-family:"trebuchet ms",sans-serif;
color:white;
}

Le résultat sera alors le suivant :

Capture d'écran d'un formulaire CSS

Complément

L'apparence des boutons "envoyer" et "annuler" peut être rendue plus dynamique de la façon suivante :

Source (x)html

<p>
<input type="submit" value="Envoyer" class="bouton" />
<input type="reset" value="Annuler" class="bouton" />
</p>

Source CSS

input.bouton {
border:2px outset red;
font-weight:bold;
cursor:pointer;
}
input.bouton:hover {
background-color:white;
color:red;
}
input.bouton:active {
border:2px 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é.
Note : Les deux derniers styles ne sont pas supportés par internet explorer.

Le résultat sera alors le suivant :