 |
Formulaires (page2) : Astuces
Quelques astuces javascript en relation avec les formulaires
1) Pour automatiquement placer le curseur dans un champ donné d'un formulaire comportant plusieurs champs, utiliser la fonction javascript focus() sur ce champ.
Utiliser par exemple ceci au niveau de la déclaration <body>:
<body onload="document.forms.form.champ.focus()">
ou bien le code javascript suivant placé après la déclaration du champ :
<input type="text" name="nom" size="15">
<script type="text/javascript">
<!--
document.forms.form.champ.focus();
// -->
</script>
où form est le nom du formulaire, et champ est le nom du champ.
Mais on pourrait utiliser plutôt document.getElementById('idchamp').focus()
(au lieu de document.forms.form.champ.focus())
si l'on ajoute l'attribut ID="idchamp" dans la balise de définition du champ.
|
|
2) Pour automatiquement sélectionner ou effacer le contenu d'un champ lorsque l'on clique dedans, utiliser respectivement les évènements onfocus="this.select()" et onfocus="this.value=''"
Exemple de sélectionnement du contenu:
<input type="text" name="nom" value="entrez votre nom"
onfocus="this.select()">
|
|
Exemple d'effacement du contenu:
<input type="text" name="nom" value="entrez votre nom"
onfocus="this.value=''">
|
|
Définition de l'ordre de "tabulation" des champs d'un formulaire
Pour définit l'ordre de sélectionnement des champs d'un formulaire lorsque l'on utilise la touche <tab>,
on fera usage de l'attribut TABINDEX="numéro".
Usage de CSS en relation avec les formulaires
Les possibilités liées aux feuilles de styles CSS sont innombrables. Examinez l'exemple ci-dessous :
<style type="text/css">
<!--
.etiquette {
color: #000000;
cursor: pointer;}
.champ {
background: #eeeeee;
border: solid 1px #ffffff;
border-top-color: #888888;
border-left-color: #888888;}
.champ:hover, .champ:focus {
border: 1px solid #6666ff;
background: #ffffff;}
.bouton {
color: #000099;
background: #bbbbff;
border: solid 2px #6666ff;
border-top-color: #ffffff;
border-left-color: #ffffff;}
.bouton:hover {
color: #6666ff;
background: #ccccff;}
.bouton:focus {
background: #bbbbff;
border: solid 2px #ffffff;
border-top-color: #6666ff;
border-left-color: #6666ff;}
//-->
</style>
<form method="post" action="#">
<fieldset>
<label for="idnom" class="etiquette">Nom<br>
<input type="text" name="nom" id="idnom" class="champ" size="16">
</label>
<br>
<label for="idprenom" class="etiquette">Prénom<br>
<input type="text" name="prenom" id="idprenom" class="champ" size="16">
</label>
<br>
<label for="idaccept" class="etiquette">J'accepte les conditions<br>
<input type="checkbox" name="accepted" id="idaccept">
</label>
<br><br>
<input type="submit" class="bouton" value="Envoyer">
</fieldset>
</form>
|
|
Explications :
- La balise <LABEL> permet de définir des étiquettes de champ qui soient cliquables, ainsi, dans l'exemple ci-dessus :
- le fait de cliquer sur "Nom" ou "Prénom" met automatiquement le focus dans le champ correspondant
- le fait de cliquer sur "J'accepte les conditions" active/désactive la case à cocher correspondante (bascule)
A l'aide de la classe CSS ".etiquette" on attire ici l'attention de l'utilisateur sur ces labels :
- en définissant que le curseur survolant des labels soit de type main
- et en changeant la couleur de l'arrière-plan (background)
- Les classes CSS ".champ", ".champ:focus" et ".champ:hover" sont utilisées ici pour changer l'apparence des champs (encadrement, couleur de fond...) selon que le focus respectivement "n'est pas" ou "est" dans le champ, ou que le curseur "survole" le champ. De même les classes CSS ".bouton", ".bouton:hover" et ".bouton:focus" sont utilisées ici pour changer l'apparence du bouton "Soumettre" (selon que le focus est sur le bouton ou que l'on clique dessus). Notez cependant que tout cela fonctionne parfaitement sous Mozilla, mais pas sous le navigateur IE 6 (qui ne supporte pas les pseudo-classe ":focus" et ":hover"), navigateur pour lequel il faudrait faire un peu de JavaScript pour obtenir le même effet.
|
|
[ 142908 ]
Vous êtes ici : 
0 Membre
Vous pouvez aider ce site à évoluer, en contribuant à son développement.
Proposez vos idées de cours et/ou dossiers.
Rendez-vous dans 
