www.webelix.net

[ HTML ]


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.
Numéro

Nom

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()">
Nom
Exemple d'effacement du contenu: 
<input type="text" name="nom" value="entrez votre nom"
onfocus="this.value=''">
Nom

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

Exemple (sélectionnez le 1er champ, puis frappez plusieurs fois la touche <tab>) : 
<input type="text" name="A" tabindex="1" value="Un" size="6">
<input type="text" name="B" tabindex="4" value="Quatre" size="6">
<input type="text" name="C" tabindex="2" value="Deux" size="6">
<input type="text" name="D" tabindex="5" value="Cinq" size="6">
<input type="text" name="E" tabindex="3" value="Trois" size="6">

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 :
  1. La balise <LABEL> permet de définir des étiquettes de champ qui soient cliquables, ainsi, dans l'exemple ci-dessus : A l'aide de la classe CSS ".etiquette" on attire ici l'attention de l'utilisateur sur ces labels :
  2. 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.