Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

CSS 2
L'interface

  Changer l'apparence des formulaires

fonction  principe  la methode elle-meme  demonstration  telechargement de la methode  Compatibilite du script... a partir de : 

  Fonction
Rien de tel qu'un formulaire pour mettre un peu d'interactivité sur un site. Mais leur apparence est quelque peu frustrante, du gris, des effets de creux passés de mode...
Changez tout ça !
Il suffit d'appliquer un peu de style et vos formulaires n'auront rien à envier au reste de votre site.
Il faut juste considérer que Netscape 4.x ne supporte pas un certain nombre de mise en forme et donc traiter séparément Netscape 4.x de la version 6 ou d'Internet Explorer.
  Principe
Tout d'abord, il va nous falloir utiliser deux feuilles de style différentes : une pour Netscape 4.x, une autre pour Netscape 6.x et Internet Explorer.

Pour faire cette séparation, on commence par une fonction JavaScript qui va écrire dans la page (1er cas), ou appeler à l'extérieur (2nd cas) la feuille de style suivant le navigateur qui consulte la page.

Ce qui est supporté par Netscape 4.x :
  • La police de caractère,
  • La taille des caractères.
Ce qui est supporté par Netscape 6.x et Internet Explorer :
  • La police, la taille et la couleur des caractères (+ alignement horizontal),
  • Les 4 bordures des éléments (haut, droite, bas, gauche),
  • Le fond de l'élément (couleur et image + alignement et répétition).
On constate par contre de grosses différences de rendu entre les navigateurs supportant les mêmes mises en forme.
Voir les exemples rendus sur différents navigateurs.
  La méthode
dans la partie <head>
<style>

/* Quelques styles non spécifiques aux éléments de formulaires...*/
TD { font-family: verdana; font-size: 12px; color: #000000; }
A { color: #000000; text-decoration: none; }
A:hover { text-decoration: underline; }
</style>

<script language="JavaScript">

// Détection du navigateur
nc6 = (typeof(window.controllers) != 'undefined' && typeof(window.locationbar) != 'undefined')? true:false;
nc4 = (document.layers)? true:false;
ie4 = (document.all)? true:false;


// 1er cas : on écrit les styles directement dans la page
// Insertion des styles
document.write('<style>');
// Insertion de styles pour Internet Explorer et Netscape 6.x
if ( ie4 || nc6 ) {
document.write('TEXTAREA { background-image: url("logo.gif"); background-repeat: no-repeat; background-position: center; background-color: #CC99FF; border-width: 3px; border-color: #00FF00; border-style: double; font-family: Verdana; font-size: 11px; color: #FFFFFF; text-align: right; }');
document.write('INPUT { background-color: #FFCC99; border-width: 1px; border-color: #000000; border-style: solid; font-family: Verdana; font-size: 11px; color: #FF0000; }');
document.write('SELECT { background-color: #99CCFF; font-family: Verdana; font-size: 11px; color: #0000FF; text-align: center; }');
}
if ( nc4 ) {
document.write('TEXTAREA { background-color: #CC99FF; font-family: Courier; font-size: 10px; color: #FFFFFF; }');
document.write('INPUT { background-color: #FFCC99; font-family: Courier; font-size: 12px; color: #FF0000; }');
document.write('SELECT { background-color: #99CCFF; font-family: Courier; font-size: 11px; color: #0000FF; }');
}
document.write('</style>');
// Fin du 1er cas


// 2nd cas : on appelle une feuille de style externe
// Appel de feuille de styles externe pour Internet Explorer et Netscape 6.x
if ( ie4 || nc6 ) {
document.write('<link rel="stylesheet" href="int_form_ie.css">');
}

// Appel de feuille de styles externe pour Netscape 4.x
if ( nc4 ) {
document.write('<link rel="stylesheet" href="int_form_nc.css">');
}
// Fin du 2nd cas

</script>

Pour le second cas, on créé deux fichiers supplémentaires
Fichier : int_form_ie.css
TEXTAREA { background-image: url("logo.gif"); background-repeat: no-repeat; background-position: center; background-color: #CC99FF; border-width: 3px; border-color: #00FF00; border-style: double; font-family: Verdana; font-size: 11px; color: #FFFFFF; text-align: right; }
INPUT { background-color: #FFCC99; border-width: 1px; border-color: #000000; border-style: solid; font-family: Verdana; font-size: 11px; color: #FF0000; }
SELECT { background-color: #99CCFF; font-family: Verdana; font-size: 11px; color: #0000FF; text-align: center; }

Fichier : int_form_nc.css
TEXTAREA { background-color: #CC99FF; font-family: Courier; font-size: 10px; color: #FFFFFF; }
INPUT { background-color: #FFCC99; font-family: Courier; font-size: 12px; color: #FF0000; }
SELECT { background-color: #99CCFF; font-family: Courier; font-size: 11px; color: #0000FF; }

dans la partie <body>
<form name="formulaire">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td>Civilité :</td>
<td><input type="radio" name="civilite">M. <input type="radio" name="civilite">Mme <input type="radio" name="civilite">Mlle</td>
</tr>
<tr>
<td>Nom :</td>
<td><input type="text" name="nom" size="15"></td>
</tr>
<tr>
<td>Pays :</td>
<td><select name="pays"><option>Choisissez<option>France<option>Bresil</select></td>
</tr>
<tr>
<td>Message :</td>
<td><textarea name="message" cols="25" rows="8"></textarea></td>
</tr>
<tr>
<td align="right"><input type="checkbox" name="avis"></td>
<td>J'aime ce formulaire</td>
</tr>
<tr>
<td></td>
<td><input type="button" value="Bouton"></td>
</tr>
</table>
</form>
  Démonstration
Civilité : M. Mme Mlle
Nom :
Pays :
Message :
J'aime ce formulaire
  Téléchargement
Cette feuille de style est disponible en deux versions :
  • le style est appliqué localement, dans la balise style de la page),
  • le style dans une feuille de style externe, commune à toutes les pages (fichier .css).

    L'intérêt d'une feuille de style est de pouvoir partager le style entre plusieurs liens de la page.
    		•
    Style local :
    int_form.zip
    1 Ko    		 telechargez le style telechargez le style
    Feuille de style :
    int_form2.zip
    1 Ko
    Recherche
    		aide sur la recherche
    DHTML
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter