Les formulaires - Astuces

Les formulaires - Astuces
Cette partie montre de nombreuses astuces pour rendre un formulaire dynamique et attractif,
en réaction aux événements générés par l'utilisateur.
Il est nécessaire de bien connaître le principe des formulaires HTML pour tirer partie de ces
astuces.
Au sommaire :
1 - Donner le focus à un élément
2 - Changer le libellé d'un bouton
3 - Ne permettre qu'un seul clic sur un bouton
4 - Valider un formulaire par JavaScript
5 - Vider un champ à la prise de focus
6 - Détecter la touche [Entrée] sur un formulaire
7 - Ajouter, insérer et supprimer des lignes dans une liste SELECT
8 - Bascule entre deux listes SELECT
9 - Empêcher la saisie dans un champ
10 - Faire clignoter un bouton
1 - Donner le focus (curseur) à un élément de formulaire
Le premier champ texte a le focus au chargement de la page.
Cliquez sur les boutons pour donner le focus aux autres éléments. La prise de focus est
possible pour tous les types d'objets.
Ceci est la ligne n° 2
Le script :
<FORM name="form1">
<INPUT type="texte" name="champ1">
<INPUT type="button" value="<- Donne le focus" onClick="this.form.champ1.focus()">
<SELECT name="champ2" >
<OPTION>Ceci est la ligne n° 1</OPTION>
<OPTION>Ceci est la ligne n° 2</OPTION>
</SELECT>
<INPUT type="button" value="<- Donne le focus" onClick="this.form.champ2.focus()">
<TEXTAREA rows="2" cols="15" name="champ3">
<INPUT type="button" value="<- Donne le focus" onClick="this.form.champ3.focus()">
</FORM>
Pour donner le focus à un champ de formulaire à l'ouverture de la page, il faut ajouter cette
ligne dans la balise BODY :
onLoad="document.forms['nomduform'].elements['nomchamp'].focus()"
2 - Changer le libellé d'un bouton
Cliquez le bouton pour changer son libellé.
Le script :
<FORM name="form2">
<INPUT type="button" name="bouton" value='Cliquez-moi !' onClick="this.value='Touché
!'">
</FORM>
3 - Ne permettre qu'un seul clic sur un bouton
Accepte le premier clic sur le bouton et empêche les suivants.
Utile pour éviter de recevoir 3 fois le même message quand un visiteur s'excite sur le bouton
"Envoyer" !
Le script :
Dans l'entête de la page
<SCRIPT language="javascript">
var nbclic=0 // Initialisation à 0 du nombre de clic
function CompteClic(formulaire) { // Fonction appelée par le bouton
nbclic++; // nbclic+1
if (nbclic>1) { // Plus de 1 clic
alert("Vous avez déjà cliqué ce bouton.\nLe formulaire est en cours de traitement...
Patience");
} else { // 1 seul clic
alert("Premier Clic.");
}
}
</SCRIPT>
Dans le corps
<FORM name="form3">
<INPUT type="button" name="bouton" value="Cliquez-moi aussi !"
onClick="CompteClic(this.form)">
</FORM>
4 - Valider un formulaire par JavaScript
Il est souvent utile de vérifier la saisie d'un formulaire avant de le valider.
L'idéal est de créer un bouton (de type "button" et pas "submit") qui appelle une fonction
javascript qui contrôle la saisie et soumet ou non le formulaire.
Voyons un exemple simple de test de saisie d'un email.
Saisissez une adresse mail valide (du type [email protected])
Le script :
Dans l'entête de la page
<SCRIPT language="javascript">
function ValiderMail(formulaire) {
if (formulaire.mail.value.indexOf("@",0)<0) {alert("Adresse mail saisie invalide.\nLe
formulaire ne sera pas validé.")}
else {
alert("Formulaire validé.\nPour valider un formulaire : formulaire.submit()");
// Pour valider le formulaire en javascript :
// formulaire.submit()
}
}
</SCRIPT>
Dans le corps de la page
<FORM name="form4" action="">
Saisissez une adresse mail valide (du type [email protected])
;<INPUT type="texte" name="mail">
<INPUT type="button" name="bouton" value="Valider"
onClick="ValiderMail(this.form)">
</FORM>
Sous netscape, l’utilisation de onclick sur un bouton peut poser des problèmes.
Aussi vous pouvez aussi utiliser l’action onsubmit dans la balise du formulaire et retourner la
valeur true ou false selon le résultat du test de votre fonction pour poster ou non votre
formulaire (voir exemple rubrique 6).
5 - Vider un champ à la prise de focus
Par exemple, un champ de saisie de login avec à l'origine "Votre login".
Si vous cliquez sur le champ, "Votre login" disparaît.
Le script :
<FORM name="form5">
<INPUT type="texte" name="login" value='Votre login' onFocus="if (this.value=='Votre
login') {this.value=''}">
</FORM>
6 - Détecter la touche [Entrée] sur un formulaire
Utile dans les formulaires de recherche, où la plupart des utilisateurs tapent [Entrée] pour
valider la recherche, sans cliquer sur le bouton "Rechercher".
Entrez un mot :
L'appui sur [Entrée] déclenche la soumission du formulaire qu'il est possible de détecter avec
l'événement onSubmit. Ceci rejoint la précédente remarque de la rubrique 4.
La balise FORM peut donc s'écrire :
<FORM name="formulaire" onSubmit="maFonction()">
7 - Ajouter, insérer et supprimer des lignes dans une liste
Ce script permet d'ajouter dynamiquement des éléments dans une liste, sans rechargement de
la page (nécessite des versions 4 et + de Netscape ou Internet Explorer).
Le script :
<HTML>
<HEAD>
<TITLE>Liste</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Ajouter(form) {
var o=new Option(form.libelle.value,form.valeur.value);
form.liste.options[form.liste.options.length]=o;
}
function Inserer(form) {
var o=new Option(form.libelle.value,form.valeur.value);
if(form.liste.options.selectedIndex>=0) {
form.liste.options.length++;
for (var i=form.liste.options.length-1;i>form.liste.options.selectedIndex;i--) {
var p=new Option(form.liste.options[i-1].text,form.liste.options[i-1].value);
form.liste.options[i]=p;
}
form.liste.options[form.liste.options.selectedIndex]=o;
} else {
alert("Insertion impossible. Sélectionnez une ligne");
}
}
function Supprimer(list) {
if (list.options.selectedIndex>=0) {
list.options[list.options.selectedIndex]=null;
} else {
alert("Suppression impossible : aucune ligne sélectionnée");
}
}
function SupprimerTout(list) {
list.options.length=0;
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<FONT FACE="Arial" SIZE='-1' COLOR="#000099">
<CENTER><BIG><B>Ajouter, insérer et supprimer une ligne dans une liste</B></BIG></CENTER>
<BR>
<FORM name="formulaire">
Ce script permet d'ajouter dynamiquement des éléments dans une liste, sans rechargement de la page (nécessite des versions
4 et + de Netscape ou Internet Explorer).<BR>
Entrez le libellé et la valeur dans les champs ci-dessous, cliquez sur Ajouter ou Insérer.<BR>
Libellé : <INPUT type="text" name="libelle" size=15 value="texte">
- Valeur : <INPUT type="text" name="valeur" size=15 value="texte">
<INPUT type="button" Value="Ajouter" onClick="Ajouter(this.form)">
<INPUT type="button" Value="Insérer" onClick="Inserer(this.form)">
<BR><BR>
Sélectionnez une ligne de la liste pour voir le détail
<SELECT align=top name="liste" size=3 onChange="alert('Libellé : '+this.options[this.selectedIndex].text+'\nValeur :
'+this.options[this.selectedIndex].value)">
<OPTION value="Initiale">Ligne initiale</OPTION>
</SELECT><BR><BR>
<INPUT type="button" value="Supprimer la sélection" onClick="Supprimer(this.form.liste)">
<INPUT type="button" value="Supprimer tout" onClick="SupprimerTout(this.form.liste)">
<BR><BR>
Le bouton Ajouter ajoute à la fin de la liste la ligne.<BR>
Le bouton Insérer insère la nouvelle ligne avant la ligne sélectionnée.<BR>
Le bouton Supprimer la sélection supprime la ligne sélectionnée dans la liste.<BR>
Le bouton Supprimer tout supprime toutes les lignes.<BR>
</FORM>
<BR>
</FONT></BODY></HTML>
8 - Bascule entre deux listes
Ce script est une extension du n°7 (nécessite des versions 4 et + de Netscape ou Internet
Explorer).
Imaginons que vous deviez choisir des activités parmi une liste proposée :
Activités proposées
Plongée
Jet-Ski
Tir à l'arc
Pétanque
Bronzette
Activités retenues
Planche à voile
<HTML>
<HEAD>
<TITLE>Bascule</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Deplacer(l1,l2) {
if (l1.options.selectedIndex>=0) {
o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
l2.options[l2.options.length]=o;
l1.options[l1.options.selectedIndex]=null;
}else{
alert("Aucune activité sélectionnée");
}
}
</SCRIPT>
</HEAD>
<BODY bgcolor="#FFFFFF">
<FONT FACE="Arial" SIZE='-1' COLOR="#000099">
<CENTER><BIG><B>Basculer des éléments d'une liste à l'autre</B></BIG></CENTER>
<BR>
Nécessite des versions 4 et + de Netscape ou Internet Explorer.<BR>
Imaginons que vous deviez choisir des activités parmi une liste proposée :<BR><BR>
<FORM name="formulaire">
<TABLE><TR>
<TD align="center"><B><FONT size="2">Activités proposées</FONT></B><BR>
<SELECT align=top name="liste1" size=6 style="width:120px">
<OPTION value="Planche">Planche à voile</OPTION>
<OPTION value="Plongée">Plongée</OPTION>
<OPTION value="Jet-Ski">Jet-Ski</OPTION>
<OPTION value="Tir à l'arc">Tir à l'arc</OPTION>
<OPTION value="Pétanque">Pétanque</OPTION>
<OPTION value="Bronzette">Bronzette</OPTION>
</SELECT>
</TD>
<TD align="center">
<INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.liste1,this.form.liste2)">
<BR><BR>
<INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.liste2,this.form.liste1)">
</TD>
<TD align="center"><FONT size="2"><B>Activités retenues</B></FONT><BR>
<SELECT align=top name="liste2" size=6 style="width:120px">
<OPTION value="10">----------------------</OPTION>
</SELECT>
</TD>
</TR></TABLE>
<SCRIPT language="javascript">
// Astuce pour Netscape qui ne supporte pas style="width:100"
// Donc : création d'une ligne pour initialiser la largeur puis suppression par ce javascript
document.formulaire.liste2.options.length=0;
</SCRIPT>
</FORM>
<BR>
</FONT></BODY></HTML>
9 - Empêcher la saisie dans un champ
Dès que la curseur souris arrive sur ce champ, il est enlevé. Cela rend impossible la saisie ou
la modification de son contenu.
Non modifiable
La saisie est
L'astuce est d'utiliser l'événement onFocus qui détecte l'arrivée du curseur dans le champ.
Voici la ligne décrivant la zone :
<INPUT type="text" value="Non modifiable" name="champ" onFocus="this.blur()">
La méthode focus() appliquée au champ retire le curseur.
Avec cette ligne, il est possible de rediriger le curseur vers un autre champ du formulaire :
<INPUT type="text" value="Non modifiable" name="champ"
onFocus="this.form.champ2.focus()">
La méthode focus() appliquée à champ2 active le curseur.
10 - Faire clignoter un bouton
Pour attirer l'attention, il est possible de faire clignoter le texte d'un bouton.
Ce script permet de paramétrer le texte à afficher et le délai de clignotement.
Remarquez que le temps d'affichage du bouton vide est plus court.
<html><head><title>Bouton clignotant</title>
<STYLE type="text/css">
.petit {font-family:arial;font-size:12px}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
function GoClignoter() {
var delai1=500; // temps d'affichage du texte exprimé en millisecondes (ici 0.5 seconde)
var delai2=200; // temps d'affichage du bouton vide
var texte="TEXTE CLIGNOTANT"; // Texte à afficher
var bouton=document.cligno.clignoter; // ici on récupère le bouton concerné
if (bouton.value=="") {
bouton.value=texte;
delai=delai1;
} else {
bouton.value="";
delai=delai2;
}
setTimeout("GoClignoter()",delai);
}
</SCRIPT>
</HEAD>
<FONT SIZE="2" COLOR="navy" face="arial">
<CENTER><BIG><B>Bouton de formulaire clignotant</B></BIG></CENTER>
<BR><BR>
Ce script fait clignoter le libellé d'un bouton. Le texte et les délais d'affichage sont paramétrables.<BR>
Le délai d'affichage du bouton vide est plus court qu'avec le texte afficher.
<FORM name="cligno">
<CENTER><INPUT type="button" name="clignoter" style="width:150px" value="Texte du bouton"
onClick="alert('Bouton inactif dans cet exemple')"></CENTER>
</FORM>
<A href="javascript:GoClignoter()">Cliquez pour démarrer le clignotement du bouton</A>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR>
</FONT>
</body>
</html>
Les formulaires - Contrôles de saisies
Au sommaire :
1 - Est-ce
2 - Est-ce
3 - Est-ce
un nombre ?
une date ?
un mail ?
1 - Est-ce un nombre ?
Il peut être utile de vérifier que la saisie dans un champ de formulaire est bien un nombre : saisie de
quantités, de prix...
123A
:
Saisir ici :
Soit nb le champ à tester. Si !(isNaN(nb)) retourne true, alors nb est un nombre.
2 - Est-ce une date ?
Cette fonction vérifie la saisie d'une date au format jour/mois/année.
Entrez une date au format JJ/MM/AAAA
Voici la fonction CheckDate(d), où d est une chaîne de caractères.
function CheckDate(d) {
// Cette fonction vérifie le format JJ/MM/AAAA saisi et la validité de la date.
// Le séparateur est défini dans la variable separateur
var amin=1999; // année mini
var amax=2005; // année maxi
var separateur="/"; // separateur entre jour/mois/annee
var j=(d.substring(0,2));
var m=(d.substring(3,5));
var a=(d.substring(6));
var ok=1;
if ( ((isNaN(j))||(j<1)||(j>31)) && (ok==1) ) {
alert("Le jour n'est pas correct."); ok=0;
}
if ( ((isNaN(m))||(m<1)||(m>12)) && (ok==1) ) {
alert("Le mois n'est pas correct."); ok=0;
}
if ( ((isNaN(a))||(a<amin)||(a>amax)) && (ok==1) ) {
alert("L'année n'est pas correcte."); ok=0;
}
if ( ((d.substring(2,3)!=separateur)||(d.substring(5,6)!=separateur)) &&
(ok==1) ) {
alert("Les séparateurs doivent être des "+separateur); ok=0;
}
if (ok==1) {
var d2=new Date(a,m-1,j);
j2=d2.getDate();
m2=d2.getMonth()+1;
a2=d2.getYear();
if (a2<=100) {a2=1900+a2}
if ( (j!=j2)||(m!=m2)||(a!=a2) ) {
alert("La date "+d+" n'existe pas !");
ok=0;
}
}
return ok;
}
3 - Est-ce un mail ?
Pour vérifier qu'un mail est valide, il suffit de tester la présence de @ et du point.
function verifiermail(mail) {
if ((mail.indexOf("@")>=0)&&(mail.indexOf(".")>=0)) {
return true
} else {
alert("Mail invalide !");
return false
}
}
Cette fonction vérifie la présence du caractère @ et du . pour vérifier la validité. Si ces 2 caractères sont
trouvés, la fonction retourne true sinon, elle affiche un message et retourne false.