SELFHTML: HTML/XHTML / Formulaires / Formater les formulaires avec les CSS

	Formater les formulaires avec les CSS
	Mettre en forme les formulaires et les éléments de formulaires avec les CSS

Mettre en forme les formulaires et les éléments de formulaires avec les CSS

Avec les feuilles de style CSS vous pouvez mettre en forme l'aspect de formulaires et d'éléments de formulaires. Quelles possibilités de mise en forme fonctionnent est encore toutefois une question de chance. Les navigateurs qui supportent le formatage d'éléments de formulaires avec les CSS ne le font pas encore intégralement. Il est donc conseillé d'essayer.
Vous pouvez fixer par exemple et pour tout le formulaire, des mentions sur le formatage de la police ou sur l'arrière-plan. Vous pouvez de la même façon faire des mentions pour différents éléments du formulaire pour le formatage de la police ou pour modifier la bordure du champ par défaut.
Pour utiliser les feuilles de style CSS, il vous faut d'abord savoir comment définir des formats CSS. Ensuite, vous serez en mesure d'appliquer les propriétés CSS. Pour mettre en forme des formulaires et des éléments de formulaire, les propriétés CSS suivantes sont intéressantes:
Formatage de police
Marge extérieure et espace
Espace intérieur
Bordures
Couleurs d'arrière-plan et images d'arrière-plan

L'exemple suivant montre un formulaire complet pouvant être envoyé et qui a été mis en forme avec les feuilles de style CSS.

Exemple:

Exemple d'affichage: aperçu

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Mettre en forme les formulaires et les éléments de formulaires avec les CSS</title>
<style type="text/css">
<!--
 form
   { background-image:url(background.gif); padding:20px; border:6px solid #DDDDDD; }
 td, input, select, textarea
   { font-size:13px; font-family:Verdana,sans-serif; font-weight:bold; }
 input, select, textarea
   { color:#0000CC; }
 .passage, .champ
   { background-color:#FFFFAA; width:300px; border:6px solid #DDDDDD; }
 .choix
   { background-color:#DDFFFF; width:300px; border:6px solid #DDDDDD; }
 .cocher, .option
   { background-color:#DDFFFF; border:1px solid #DDDDDD; }
 .Bouton
   { background-color:#AAAAAA; color:#FFFFFF; width:200px; border:6px solid #DDDDDD; }
-->
</style>
</head>
<body>

<h1>Vous pouvez envoyer ceci!</h1>

<p>La condition préalable est une connexion à Internet. Aucune donnée n'est sauvegardée, le script CGI qui traite
 le formulaire sort en fin de compte les données qu'il lit.</p>

<form action="http://actuel.fr.selfhtml.org/cgi-bin/comments.pl">
<table border="0" cellpadding="3" cellspacing="0">
 <tr>
  <td align="right">Prénom:</td>
  <td><input name="prenom" type="text" class="champ" size="30" maxlength="30"></td>
 </tr><tr>
  <td align="right">Nom de famille:</td>
  <td><input name="nom" type="text" class="champ" size="30" maxlength="40"></td>
 </tr><tr>
  <td align="right" valign="top">Sexe:</td>
  <td>
   <input type="radio" class="option" name="sexe" value="m"> masculin<br>
   <input type="radio" class="option" name="sexe" value="w"> f&eacute;minin
  </td>
 </tr><tr>
  <td align="right" valign="top">Caractéristiques:</td>
  <td>
   <input type="checkbox" class="cocher" name="caracteristique" value="fumeur"> fumeur<br>
   <input type="checkbox" class="cocher" name="caracteristique" value="conducteur"> conducteur<br>
   <input type="checkbox" class="cocher" name="caracteristique" value="mordu-HTML"> mordu de HTML
  </td>
 </tr><tr>
  <td align="right" valign="top">Grande ville la plus proche:</td>
  <td>
   <select name="grandeville" class="choix" size="1">
    <option value="Paris">Paris</option>
    <option value="Lyon">Lyon</option>
    <option value="Marseille">Marseille</option>
    <option value="Lille">Lille</option>
   </select>
  </td>
 </tr><tr>
  <td align="right" valign="top">Commentaire:</td>
  <td><textarea name="Text" class="passage" rows="10" cols="50"></textarea></td>
 </tr><tr>
  <td align="right">Formulaire:</td>
  <td>
   <input type="submit" class="Bouton" value="Envoyer">
   <input type="reset" class="Bouton" value="Interrompre">
  </td>
 </tr>
</table>
</form>

</body>
</html>

Explication:

Dans l'exemple, ont été définis globalement des formats CSS pour un fichier HTML pour les éléments de formulaire dans un passage de style de l'entête de fichier. Pour les différents types de champs de formulaire, ont été définis des formats pour les classes - Ce sont dans l'exemple, les inscriptions faites dans le passage style qui commencent par un point (.).

Le formulaire lui même, à savoir l'élément form se voit affecter dans l'exemple un graphique d'arrière plan qui fait l'effet d'un papier peint ainsi qu'une bordure gris perle épaisse de 6 pixels. Un espace intérieur de 20 pixels assure une présentation plus soignée.

Pour les cellules de tableau (td) et les éléments de formulaire input, select et textarea ont été définis une taille de police de 13 pixels, la police Verdana et les caractères gras. De plus, pour les trois types d'éléments de formulaire, la couleur de police bleue a été fixée.

Les champs de saisie et les passages de saisie avec la classe entree (les repères HTML reçoivent pour cela l' attribut universel class= ) se voient affecter une couleur d'arrière-plan jaune paille et une largeur fixe de 300 pixels et la bordure autour des champs reçoit les mêmes propriétés que celle qui entoure le formulaire.

Les éléments de listes de choix reçoivent tous une couleur d'arrière plan cyan clair. Les listes de choix de la classe choix ont elles aussi une largeur fixe de 300 pixels. Pour les éléments de la liste de choix de cette classe, on a tenté d'affecter une bordure gris perle d'une épaisseur de 1 pixel.

Les boutons enfin qui sont nécessaires dans l'exemple pour envoyer et interrompre, reçoivent une couleur d'arrière plan grise, une largeur de 200 pixels et une police de couleur blanche. Même les boutons reçoivent aussi l'épaisse bordure gris perle.


	Exploitation des formulaires
	Boutons pour envoyer ou interrompre

SELFHTML/Aides à la navigation

HTML/XHML

Formulaires