 |
 Montrer le déplacement dans les formulaires |
|
|
|
Connexion ratee
|
|
Quoi de plus ennuyeux que de remplir un formulaire ? Et pourtant cela vous sert puisque vous connaîtrez mieux vos visiteurs ainsi !
Alors egayez un peu tout ça et guidez vos visiteurs dans leur saisie : changez l'apparence de chaque champ au fur et à mesure que le visiteur passe dessus. |
|
|
|
|
|
Tout d'abord, notons que Netscape 4.x ne supporte pas les mises en formes appliquées, on va donc appliquer la feuille de style uniquement
à 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.
Chaque élément de formulaire porte par défaut dans la page une classe appelée 'off'.
On place encore sur chaque élément deux appels à la fonction qui modifiera la classe appelée : une 'onFocus' (à la
sélection du champ), une 'onBlur' (à la désélection du champ).
Cette fonction prend comme paramêtres le nom du formulaire, le nom du champ concerné et surtout la classe qui doit être appliquée.
Ensuite, elle ne fait qu'appliquer au champ spécifié la classe demandée. |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<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;
// Insertion de styles pour Internet Explorer et Netscape 6.x
if ( ie4 || nc6 ) {
document.write('<style>');
document.write('.off { border-width: 1px; border-style: solid; border-color: #000000; }');
document.write('.on { border-width: 1px; border-style: solid; border-color: #000000; background-color: #3399FF; }');
document.write('</style>');
}
// Fonction pour changer le style applique aux champs de formulaires
function change_classe(formulaire,champ,etat) {
eval("document." + formulaire + "." + champ).className = etat;
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<form name="formulaire">
<table border="0" cellspacing="0" cellpadding="3">
<tr>
<td>Civilité :</td>
<!-- OnFocus (sur selection du champ), on demande le changement de style du champ, OnBlur (sur deselection du champ), on replace le style initial -->
<!-- Ne pas oublier de donner le numero d'index des boutons radios ! -->
<td><input type="radio" name="civilite" class="off" OnFocus="change_classe('formulaire','civilite[0]','on');" OnBlur="change_classe('formulaire','civilite[0]','off');">M. <input type="radio" name="civilite" class="off" OnFocus="change_classe('formulaire','civilite[1]','on');" OnBlur="change_classe('formulaire','civilite[1]','off');">Mme <input type="radio" name="civilite" class="off" OnFocus="change_classe('formulaire','civilite[2]','on');" OnBlur="change_classe('formulaire','civilite[2]','off');">Mlle</td>
</tr>
<tr>
<td>Nom :</td>
<!-- OnFocus (sur selection du champ), on demande le changement de style du champ, OnBlur (sur deselection du champ), on replace le style initial -->
<td><input type="text" name="nom" size="15" class="off" OnFocus="change_classe('formulaire','nom','on');" OnBlur="change_classe('formulaire','nom','off');"></td>
</tr>
<tr>
<td>Prénom :</td>
<td><input type="text" name="prenom" size="15" class="off" OnFocus="change_classe('formulaire','prenom','on');" OnBlur="change_classe('formulaire','prenom','off');"></td>
</tr>
<tr>
<td>Message :</td>
<td><textarea name="message" cols="25" rows="8" class="off" OnFocus="change_classe('formulaire','message','on');" OnBlur="change_classe('formulaire','message','off');"></textarea></td>
</tr>
<tr>
<td align="right"><input type="checkbox" name="avis" class="off" OnFocus="change_classe('formulaire','avis','on');" OnBlur="change_classe('formulaire','avis','off');"></td>
<td>J'aime ce formulaire</td>
</tr>
</table>
</form>
|
|
|
|
|
|
|
|
|
|
|
|
|
