SELFHTML

Formater les formulaires avec les CSS

Page d'information: vue d'ensemble

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

 vers le bas 

HTML 4.0XHTML 1.0MSIE 4.0Netscape 6.0 Mettre en forme les formulaires et les éléments de formulaires avec les CSS

Avec les Chapitre: vue d'ensemble 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 Chapitre: vue d'ensemble 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:
Autre page d'information Formatage de police
Autre page d'information Marge extérieure et espace
Autre page d'information Espace intérieur
Autre page d'information Bordures
Autre page d'information 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:

Démonstration - nouvelle fenêtre 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é Autre page d'information 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é Autre page d'information 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'Chapitre: vue d'ensemble 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.

 vers le haut
page suivante Autre page d'information Exploitation des formulaires
page précédente Autre page d'information Boutons pour envoyer ou interrompre
 

© 2001 Stefan Münz / © 2003 Traduction Adresse électronique Serge François, 13405@free.fr
Adresse électronique selfhtml@fr.selfhtml.org