L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX new!
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle

     Referencement
     Créat. de bannière

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
97569 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kits graphiques

Plus :
     Comparateur de prix
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Hebergement gratuit
     Le PHP facile
     Horoscope
     Comscripts
     WebmasterClub
     L'écriteau
     Faro-dessing
     Activeartanima...
     Le village de ...
     Images gifs an...
     Netsources
     Easy-script.com
     Création de site
     Créer son site...
     K i s s design
     Les autres
     Votre site ici ?


Article posté par : krucial
Date de mise en ligne : 20-04-2004
Niveau : Assez facile
>> Ajouter un article

La presentation de vos formulaires avec les CSS


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 :

Il vous suffit d'inserer ces lignes entre les balises <HEAD> et </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>


Nous avons ici defini que tous les champs INPUT et SELECT de notre page seraient orange, avec le texte rouge, en police arial de taille 10.
Exemple :



Définir un type d'affichage par champ :

Vous pouvez aussi définir un type d'affichage par champ de formulaire en rajoutant les attributs dans les balises HTML.
Exemple :
<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 :


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 :
<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>


Ce qui donne :



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
...

Utilisons ces exemples sur des champs (que vous pouvez remplir pour vous abonner à la news letter :).
On peut donc faire tout ce qu'on veut et enfin rendre les champs aux couleurs de son site ! :

La source :
<INPUT TYPE=text NAME=email STYLE="color:#000000; background-color:#FFFFFF; font-size:12px; font-family:arial; font-weight:bold; border-width:1; width:120px; text-align:center; border-color:#000000">
<INPUT TYPE=submit VALUE="OK!" STYLE="color:#000000; background-color:#FFCC00; font-size:12px; font-family:arial; font-weight:bold; border-width:1; width:40px; text-align:center; border-color:#000000">


Plus d'infos sur les CSS.



Annotations des visiteurs :

De flagger - le 14-09-2006

Effectivement ça fonctionne très bien avec ou sans guillemets, à condition d'avoir un navigateur digne de ce nom mais comme presque tout le monde utilise IE on peut dire que ça fonctionne pas...
De Romain128 - le 30-08-2005

Ca fonctionne,mais il faut enlever les guillemets.
input[type=text]
@+
De flagger - le 18-07-2005

ça m'a l'air bien pratique ce truc :
input [type="button"]

si seulement ça fonctionnait...
De Xenon_54 - le 14-07-2004

Pour modifier le style d'un type de champ en particulier:
/* Champ "text" */
input[type="text"] {
border: 1px solid #000;
}

>> Poster une annotation sur cette astuce

Retour à la liste des trucs et astuces





57 visiteurs
actuellement en ligne

    PUBLICITE



     ANNUAIRE WEBMAST.
Mutivea - Sonneries & logos
Plus de 6.000 sonneries - Stats ultra-détaillées - Paiement à la demande - Marque blanche.
http://mobile.multivea.com
Cat : Affiliation - publicité
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
247 des membres
2586 sur le web
>> Tous les scripts

     LES MEMBRES :
53618 membres
9731 comptes CountUs
1357 comptes myCircle

     LES FORUMS :
14 forums
38925 topics
187800 messages
>> Les forums

    SONDAGE

Utilisez-vous une page d'accueil personnalisable ?
Oui, la page d'accueil de Google (pas le moteur)
Oui, netvibes
Oui, mon Yahoo
Oui, my MSN
Oui, un autre
Non, je n'utilise pas de service de page d'accueil personnalisée
La mini-astuce "Divers" du jour par QuentinC
Saviez-vous que vous pouvez utiliser votre navigateur comme client FTP ?
Pour cela, entrez une adresse du type :
ftp://nom_utilisateur:mot_de_passe@ftp.serveur.com
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 13/05/2008 16:22:50 | Design by Studcrea | Gen. en 0.496 sec.