La presentation de vos formulaires avec les CSS

La presentation de vos formulaires avec les CSS

Messagede olive le Ven 13 Juin 2008 23:29

Un formulaire, c'est moche, c'est un fait. Cependant, avec les CSS et internet explorer, il est possible de mieux les integrer à nos pages, en modifiant ses couleurs ou ses attributs de texte. Et en plus c'est pas bien compliqué.

Définir le style de tous les formulaires de votre page :

Code: Tout sélectionner
<HEAD><STYLE TYPE="text/css">
<!--
INPUT {
     color:#CC0000;
     background-color:#FFCC00;
     font-size:10px;
     font-family:arial;
}
SELECT {
     color:#CC0000;
     background-color:#FFCC00;
     font-size:10px;
     font-family:arial;
}
-->
</style>

</HEAD>

Définir un type d'affichage par champ :
Exemple :
Code: Tout sélectionner
<INPUT TYPE=text NAME=test SIZE=20 MAXLENGTH=40 VALUE="C'est un essai" STYLE="color:#FFFFFF;background-color:#000099">


Le style est defini dans la balise de l'element. Cet exemple donne :
C'est un essai

A partir de lĂ , toutes les fantaisies sont possibles. Vous pouvez mĂŞme aller jusqu'Ă  definir une couleur pour chaque element d'un SELECT. Exemple :
Code: Tout sélectionner
<SELECT NAME=couleur>
<OPTION VALUE="Blanc" STYLE="color:#000000;background-color:#FFFFFF"> Blanc
<OPTION VALUE="Rouge" STYLE="color:#FFFFFF;background-color:#CC0000"> Rouge
<OPTION VALUE="Vert" STYLE="color:#FFFFFF;background-color:#336633"> Vert
<OPTION VALUE="Gris" STYLE="color:#FFFFFF;background-color:#868486"> Gris
<OPTION VALUE="Bleu" STYLE="color:#FFFFFF;background-color:#336699"> Bleu
<OPTION VALUE="Noir" STYLE="color:#FFFFFF;background-color:#000000"> Noir
</select>

Les options possibles :

Voici une liste d'attributs qui vont modifier l'apparence de vos formulaires :
color : Change la couleur du texte du champ. Exemple : color:#CC0000
background-color : Change la couleur du fond du champ. Exemple : background-color:#FFCC00
font-size : Change la taille de la police. Exemple : font-size:12px
font-family : Change la police. Exemple : font-family:arial
font-weight : Pour changer la largeur des caractères. Exemple font-weight:bold
border-width : Pour changer la bordure du champ. Exemple : border-width:1px
height : Pour changer la hauteur. Exemple : height:20px
width : Pour changer la largeur du champ. Exemple : width:120px
text-align : Pour aligner le texte dans le champ. Exemple : text-align:center
border-color : Pour changer la couleur de la bordure. Par exemple : border-color:#000000

olive
 
Messages: 0
Inscription: Dim 8 Juin 2008 22:15


Retourner vers Languages du web

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 0 invités

cron