Les formulaires HTML & JavaScript

Dans les exemples des chapitres précédents l'utilisateur communiquait avec le programme grâce à des fonctions natives : prompt(), confirm() & alert(). On ne peut pas dire que ce soit très ergonomique ...

Si JavaScript est un bon langage de programmation pour le Web il faut regretter que la gestion des entrées et sorties soit minimaliste ...

Heureusement dans HTML nous avons un outil formidable : le formulaire HTML.
D'autant que la norme HTML 5 à notablement enrichi cet outil : de nouveaux types de champs, de nouveaux attributs pour un contrôle de saisie "côté client" efficace sans qu'il soit nécessaire parfois de recourir à un script JS.
Il est donc préférable de toujours confier les entrées-sorties à un formulaire HTML associé ou non à un script.

Formulaires simples

J'entends par "simples" des formulaires qui ne sont pas des formulaires de soumission.
Dans de tels formulaires les attributs action & method de la balise FORM sont absents et le bouton "valider" est de type "button" pour appeler un fonction JS.

Premier exemple : la concaténation

Thème: l'utilisateur saisit un nom puis un prénom et, grâce à un script, la concaténation des deux est réalisée et affichée. Puis le focus est rendu au champ pour saisir le nom.

dans le premier champ on doit saisir un nom
dans le deuxième champ on doit saisir le prénom
dans un troisième champ (en lecture seule) doit s'afficher le nom et le prénom concaténés

Il faut aussi un bouton de commande pour appeler le script (sur clic).
Il faut aussi des légendes pour aider l'utilisateur.

Le code CSS et HTML

...
<form name ="f">
	<label>votre nom : </label><input type = 'text' name ="nom">
	<label>votre prénom  : </label><input type = 'text' name ="prenom">
	<label></label><button type = 'button' name ="bouton">Concaténez ! </button>
	<label>Nom et prénom : </label> <input type ='text' readonly name ="nom_prenom">
</form>
...

Précisez surtout le type "button" pour la balise button sinon le type par défaut est "submit" et le script ne sera alors pas exécuté.

Le script

Il est très simple. f.bouton.onclick = function () { f.nom_prenom.value = f.nom.value +" "+ f.prenom.value ; f.nom.focus(); // activer le premier champ du formulaire }

Pour accéder en JavaScript, à un élément de formulaire, j'ai utilisé une vieille technique, mais toujours valide, reposant sur la syntaxe : nomFormulaire.nomChamp.propriété / méthode / événement.
Cela suppose que le formulaire et les contrôle du formulaire soient nommés (attribut "name").
Notez aussi que la fonction n'est pas nommée : fonction anonyme.

Le rendu dans un Iframe de "concatenation.htm"

Inconvénient de ce programme : même si je laisse un des champs vide je peux concaténer.

Deuxième exemple : puissance carré d'un nombre entier ou décimal

Nous saisissons un nombre (entier ou décimal) dans un champ.
Suite à un clic sur le bouton de commande, le carré ce nombre s'affiche dans un deuxième champ du formulaire.

Le code HTML

...
<form name ="f">
		<input type = 'number'  name ="nombre"  step ="any" placeholder ="Saisir un entier ou un décimal">
		<br><button type = 'button' name ="bouton">Calculez le carré de ce nombre !</button>
		<br><label>Carré du nombre  :</label><input type = 'text'   readonly  name ="carre">
</form>
...

Le premier INPUT est de type "number" (nouveau type de champ introduit par la spécification HTML5). Tous les navigateurs récents ont implémenté ce type de champ.
Comme j'ai rajouté l'attribut step ="any" je peux saisir un décimal.
J'ai aussi utilisé l'attribut placeholder ="légende".

Sous Chrome on peut saisir dans ce champ un nombre décimal au format français (la virgule en tant que séparateur).

Le script

f.bouton.onclick =function()
{	
	var vnombre = f.nombre.value;
	f.carre.value = vnombre * vnombre;
}

Le script ne présente aucune difficulté.

Le rendu dans un Iframe

Saisissez 5.5 puis 5,5 dans le champ.
À chaque fois vous obtenez comme résultat 30.25

Des applications en ligne HTML5 & JS

En combinant dans un document HTML un formulaire HTML5, du CSS3 et un script, il est possible de réaliser des applications web.
En lien deux applications qui peuvent vous être utiles :
-Calculette en ligne
-Boite à couleurs

Formulaires de soumission

Je vais maintenant évoquer l'emploi éventuel de JavaScript dans le cadre d'un formulaire de soumission c'est à dire un formulaire qui permet d'adresser des données dans une autre page le plus souvent en vue d'un traitement en PHP.
Le traitement PHP va par exemple, revérifier la validité des données puis modifier la base de données du site.

On reconnait un formulaire de soumission facilement ; les attributs action & method de la balise FORM deviennent obligatoires. De plus le bouton de commande est de type "submit".
Dans ce type de formulaire avant toute tentative de soumission des données il faut procéder à un contrôle de saisie "côté client".
Vous êtes en droit de penser que grâce à toutes ces nouveautés apportées par HTML5 & CSS3 on peut parfaitement effectuer un contrôle de saisie "côté client" sans avoir à recourir à JavaScript. Mais en fait le "contrôle navigateur" (c'est à dire grâce au code HTML) à ses limites ...

Thématique : inscription à un site

Pour vous inscrire sur un site de rencontres coquin (lol) vous devez saisir en guise d'identifiant votre adresse mail et la confirmer puis choisir un mot de passe et le confirmer.
Le mot de passe doit contenir entre 6 et 8 caractères alphanumériques c'est à dire des lettres non accentuées et des chiffres. Les autres caractères sont bannis.

Nous envisageons successivement plusieurs solutions.

Première solution : pas de script !

Le contrôle de saisie se fera uniquement grâce à l'emploi des nouveaux types de champs (email, number) et des attributs required & pattern pour les champs texte. Il s'agit donc d'un contrôle via le HTML et géré par le navigateur ; on emploie donc l'expression "contrôle navigateur".

Le code

...
<form action = "inscription_trait.htm" target ="_blank"  method ='post'>
<p>Vous devez saisir votre adresse mail en guise d'identifiant et choisir un mot de passe.
<br>Le mot de passe est composé de lettres non accentuées et de chiffres ; entre 6 et 8 caractères</p>
    <label>Tapez votre adresse mail : </label>	
	<input type = "email" required placeholder = "n'oubliez pas @" 
			name ='mail1'>
	 <label>Confirmez votre adresse mail : </label>	
	<input type = "email" required name ='mail2'>
	<label>Saisissez mot de passe :</label>
	<input type = "password"  required  pattern ='[A-z0-9]{6,8}' 
			maxlength ='8' 
		placeholder = 'entre 6 et 8 lettres ou chiffres' name ='passe1'>
	<label>Confirmer le mot de passe : </label>
	<input type = "password" required  pattern = '[A-z0-9]{6,8}'  
			maxlength ='8' name ='passe2'>
    <label></label><button type = 'submit'> inscription</button>
</form>
...

Les données sont envoyées avec la méthode POST. En cas de succès de la soumission accès à la page "inscription_trait.htm" dans un nouvel onglet. En effet la balise form comprend l'attribut target="_blank".
Cette page cible réserve quelques surprises agréables ...

Dans la réalité la page cible est un document PHP dans lequel il y a un contrôle de saisie (côté serveur) cette fois suivi d'un traitement des données soumissionnées. Le codage employé est le PHP.
Ce double contrôle de saisie est obligatoire car le contrôle côté client peut être facilement courcircuité par l'internaute (qui à accès au code HTMM & JS).

Dans un formulaire de soumission l'élément button doit être de type "submit". En effet si il est de type "button" il n'y aura pas de soumission possible ; les données saisies ne seront pas adressées à la cible (valeur de l'attribut "action").

Dans notre exemple le formulaire comprend quatre champs de saisie dont deux de type "email" et deux de type "password"
Les attributs name de chaque INPUT sont utiles dans le cadre d'un éventuel traitement PHP ; traitement qui ne sera pas évoqué dans ce chapitre.

Notez les pattern associés aux champs pour la saisie et confirmation du mot de passe.
D'après ce "pattern" seuls sont autorisés les lettres (majuscules et minuscules) non accentuées ainsi que les chiffres. Donc les lettres accentuées, les caractères de ponctuation sont interdits.

Les quatre champs ne peuvent rester pas vides car attribut required.
Dans les champs "passe1" et "passe2" il est impossible de saisir plus de 8 caractères grâce à l'attribut maxlength ='8'.

Tests

dupont@free.fr
dupont@free.fr
sesame62
sesame62

Bravo! vous accéder à la page "inscription_trait.htm". Donc vous avez soumissionné avec succès.

dupont@freefr
djpont@freee.fr
sesame62
sdsame62

On accède quand même à la page "inscription_trait.htm" alors que les deux adresses mail sont différentes et les deux mots de passe sont également différents.
Vous découvrez à cette occasion les limites du "contrôle navigateur".

Si vous devez comparer la saisie dans deux champs différents, HTML ne vous est d'aucun secours puisque la notion de test est étrangère à ce langage ; il faut rajouter un script de contrôle.

Deuxième solution : avec un script

Du "côté client" le contrôle navigateur (ou via le HTML) sera associé à un contrôle via un script. Grâce à JavaScript il sera possible de comparer les deux saisies de l'identifiant ainsi que les deux saisies du mot de passe.

Le code HTML

Le code HTML reste inchangé sauf pour la balise FORM ... <form name ="f" action = "inscription_trait.htm" target ="_blank" method ='post' onsubmit="return fenvoi()" > ... <button>Inscription</button> </form> <h3 id ="message"></h3>

Le formulaire se nomme "f". Notez dans la balise FORM la valeur de l'attribut onsubmit : "return fenvoi()".
Avec cet attribut il y aura soumission seulement si les saisies correspondent aux gabarits et si la fonction fenvoi() retourne VRAI.
On combine donc deux catégories de contrôles de saisie : par HTML et par JS.
Notez aussi la balise H3 identifiée "message" qui est initialement vide ...

Le script associé au formulaire

function fenvoi()
{
	var message = document.querySelector('#message')
	var compteur = 0 ;
	if(f.mail1.value == f.mail2.value) compteur++;
	if(f.passe1.value == f.passe2.value) compteur++;
	if (compteur < 2)  
		{message.innerHTML = "champs mal renseignés"; return false; }
	else 
		{return true; message.innerHTML = "saisie correcte" ;  }
} 		// fin fonction

Le script se contente de vérifier l'égalité entre les deux adresses mail d'une part et les deux mots de passe d'autre part. Il n'est pas nécessaire de vérifer le gabarit, la longueur de la chaine saisie puisque ces contrôles sont déjà effectués par HTML

Les noms des balises sont utilisés dans le cadre du script et le seront aussi dans le cadre du traitement PHP.

Si égalité entre identifiants et égalité entre mots de passe alors compteur vaut 2 ; La fonction retourne alors true.
Sinon la fonction retourne false et un message d'erreur est affiché dans la balise H2.
Dans les deux cas la balise H3 identifiée "message" est remplie pas un message.

Test

Premier essai : saisir : toto.free - toto.free- abcd - abcd
Les mails et mots de passe sont égaux entre eux mais ne correspondent pas aux "pattern" donc soumission bloquée par HTML.

Deuxième essai : saisir : toto@free.fr - toti@free.fr - abcedefij -abcdefgh
Les mails et mots de passe correspondent aux patterns mais ne sont pas égaux entre eux donc soumission bloquée par le script (retourne false)

Troisième essai : saisir : toto@free.fr - toto@free.fr - abcedefg -abcdefg
Les saisies correspondent aux gabarits et sont égaux entre eux donc soumission effectuée avec succès.

Remarque importante

Un contrôle de saisies "côté client" (par le navigateur et JS) ne dispense d'une vérification "côté serveur" (en PHP au niveau de la page cible).
En effet le JavaScript peut être désactivé par le visiteur et ce dernier peut accéder au code (via l'ongle "éléments" de la console) pour supprimer (pour sa session) les contrôles de saisie HTML. En d'autres termes tous les contrôles "côté client" peuvent être rendus inopérants.

Troisième solution

Il existe désormais une solution plus simple pour conditionner la soumission et plus conforme à la programmation JS moderne.
Plutôt que d'utiliser l'attribut onsubmit dans la balise FORM, utilisez le gestionnaire d'évènements de JS appelant une fonction anonyme. Et dans cette fonction, utilisez la méthode event.preventDefault().

Le code avec emploi de "event.preventDefault()"

Le code HTML : ... <form name ="f" action ="inscription_trait.htm" method ="post"> ... <button type ="submit">Inscription</button> </form> <h3 id ="message"></h2>

L'attribut "onsubmit ..." a disparu de la balise FORM. Sinon pas de changement.

Le script : ... var message = document.querySelector('#message') ; document.querySelector('form').onsubmit = function(event) // sur soumission du formulaire appel d'une fonction anonyme { if (f.mail1.value == f.mail2.value && f.passe1.value == f.passe2.value) { message.textContent = "Saisie correcte ! " ; } else { event.preventDefault(); // annulation de la soumission message.textContent = "Erreurs de saisie !" ; } } // fin fonction anonyme ...

Donc tout le code JS est regroupé dans le script ; plus de "scories" de JS dans le HTML.

Appel de la fonction JS sur soumission du formulaire : document.querySelector('form').onsubmit = function(event)
Si le test est vérifié (saisie correcte) affichage d'un message : "saisie correcte".
Sinon annulation de la soumission et affichage d'un message d'erreur.

Test

Vous pouvez refaire les mêmes tests que lors de la version précédente : saisies égales mais ne correspondant pas aux gabarits, saisies correspondant aux patterns mais inégales, saisies égales et correspondant aux gabarits.

Afficher le mot de passe

Désormais sur beaucoup de sites, les caractères que vous saisissez dans un champ "mot de passe" peuvent être affichés si vous cliquez sur une icône.

Thème : connextion à un site par identifiant et mot de passe.

Le code HTML

<form name ="f">
	<label>Tapez votre identifiant : </label>	
		<input type = "email"  name ="identifiant" required>
	<label>Saisissez  le mot de passe :</label>
		<input type = "password"  required name ='motdepasse'> 
		<img src ="../images/oeil.png" style ="height : 50px; width : auto;"  title ="afficher le mot de passe" 
			onclick ="f_oeil()">	
</form>

Une image représentant un oeil (facile à trouver sur la toile) est affichée à côté du champ de type "password".
Une légende est associée à l'image.
Si clic sur cette image appel : d'une fonction.

Le script

Il est d'un simplicité déroutante. function f_oeil() { if (f.motdepasse.getAttribute('type')=='password') {f.motdepasse.setAttribute('type','text'); } else {f.motdepasse.setAttribute('type','password'); } }

Si le champ "motdepasse" est de type "password" alors il devient de type "text".
Sinon c'est l'inverse.

Le rendu

Formulaire comprenant des champs masqués

Le visiteur (du site) qui remplit un formulaire peut adresser à son insu des informations au site.
En effet un formulaire peut comprendre des champs masqués au visiteur. Ces champs doivent être remplis via l'attribut "value" ou par un script.

Thème

En se connectant à son espace le visiteur communique à son insu la largeur et la hauteur de l'écran du terminal qu'il utilise.
Ainsi l'administrateur du site sait s'il a visité avec un ordinateur de bureau ou un PC portable ou une tablette ou un smartphone.

Le code HTML

<form name ="f" action = "cible.php"  method ='post' >
	<label>Tapez votre identifiant : </label>	
	<input type = "email"  name ="identifiant" required>
	<label>Saisissez  le mot de passe :</label>
	<input type = "password"  required name ='motdepasse' 
	pattern ='[A-z0-9]{6,8}' placeholder = 'entre 6 et 8 lettres ou chiffres' > 
	<input type ="hidden" value ="Largeur et hauteur de la fenêtre" name ="legende">
	<input type ="hidden"  name ="masque1" >
	<input type ="hidden"  name ="masque2" >
	<button type ="submit">Connexion</button>
</form>

Les données renseignées sont transmises à la page "cible.php" avec la méthode POST.
Remarquez les trois champs masqués (input type ="hidden").

Le script

document.querySelector('form').onsubmit = function() 
{
 	f.masque1.value = screen.width; 
	f.masque2.value = screen.height; 
} // fin fonction anonyme

Pour éviter le onsubmit="return nomfonction() dans la balise FORM, l'appel de la fonction se réalise dans le script :
document.querySelector('form').onsubmit = function()
Ce qui est beaucoup plus conforme au JS moderne.

La page "cible.php"

Pour information je vous communique un extrait de la page "cible.php".
Il s'agit d'un script PHP qui se contente d'afficher les données soumissionnées par la méthode POST. ... <body> <?php echo "identifiant est : " .$_POST['identifiant']. "<br>"; echo "mot de passe est : " .$_POST['motdepasse']. "<br>"; echo $_POST['legende']. "<br>"; echo "largeur écran est : " .$_POST['masque1']. "<br>"; echo "hauteur écran est : " .$_POST['masque2']. "<br>"; ? >

Le rendu

Les autres contrôles

Dans un formulaire il n'y a pas que des champs et des boutons de commande.

boutons radio
cases à cocher
listes à choix unique
listes à choix multiple

Exemple

Dans l'exemple ci-desssous je vous montre comme traiter en JS mais aussi en PHP ces différents types de contrôles.

Le code HTML

...
<form name ="f"  action ="autres_controles.php" method ="post" style ="width : 80%; margin: auto; border : 2px solid black;">
	<p>Quelle est votre genre ? </p>
    <input type="radio" name="sexe" value="Monsieur"/>Masculin <br>
    <input type="radio" name="sexe" value="Madame" checked />Féminin<br>
	
	<p>Votre tranche d'âge ? </p>
	<select name = 'age'> 
		<option value = 't1'>Moins de 20 ans </option>
		<option value = 't2'>Entre 20 et 40 ans </option>
		<option value = 't3'>Entre 40 et 60 ans  </option>
		<option value = 't4'>Plus de 60 ans </opt=ion>
	</select>
 
	<p>Jeux de société pratiqués</p>
	<input type="checkbox" name="jeux[]" value="échec" class ='cases' >Echec <br>
	<input type="checkbox" name="jeux[]" value="bridge" class ='cases'>Bridge<br>
	<input type="checkbox" name="jeux[]" value="tarot" class ='cases'>Tarot <br>
	<input type="checkbox" name="jeux[]" value="belote" class ='cases'>Belote <br>
	<input type="checkbox" name="jeux[]" value="autres" class ='cases'>Autre <br>
	<input type="checkbox" name="jeux[]" value="aucun" class ='cases' checked>Aucun <br>
	
	
	<p>Sports pratiqués ?  </p>
	<select name = 'sports[]' multiple style ="height : 80px;"> 
		<option value = 'foot' class ="multiple">Football</option>
		<option value = 'nata'class ="multiple">Natation</option>
		<option value = 'vélo' class ="multiple">Vélo</option>
		<option value = 'tennis'class ="multiple">tennis</option>
		<option value = 'autre' class ="multiple">Autre sport</option>
		<option value = 'aucun' class ="multiple" selected >Aucun sport</option>
	</select>
	<br><button type ="button" name ="js" >Traitement JS ! </button>
	<button type ="submit" name ="php" >Traitement PHP ! </button>
</form>

<h3 id ="resultat"></h3>
...

Attention, le code HTML est conçu aussi pour un traitement PHP d'où l'instruction :
...form name ="f" action ="autres_controles.php" method ="post" ...
C'est en vue du traitement PHP que le groupe de cases cocher et la liste à choix multiples portent le nom d'un tableau de valeurs : jeux[] & sports[].
Ce nommage est obligatoire dans le cadre du traitement PHP.
Notez que toutes les cases à cocher bénéficient de la classe "cases" et tous les items de la liste à choix multiples sont affectés de la classe "multiple".
Aucune mise en forme n'est associée à ces deux classes ; elles ont un rôle uniquement dans le cadre du script !

Le script

...
f.js.onclick = function () 
{
	var contenu = "Genre : " + f.sexe.value + "<br> " ; 
	contenu += "Tranche d'age : " + f.age.value + "<br>" ; 
	contenu+= "jeux pratiqués : " ; 
	var jeux = document.querySelectorAll('.cases'); 
	for (i=0; i < jeux.length; i++) 
		{if (jeux[i].checked) {contenu += jeux[i].value + " " ; } }
	contenu+= "<br> sports pratiqués : "; 
	var sports = document.querySelectorAll('.multiple'); 
	for (i=0; i < sports.length; i++) 
		{if (sports[i].selected) {contenu += sports[i].value + " " ; } }
		
	document.getElementById("resultat").innerHTML = contenu; 
}
...

Pour ces quatre types d'entrées il faut manipuler les "value"
Pour un groupe de boutons radio et une liste à choix unique le traitement JS est simple puisqu'il n'y a qu'une seule valeur saisie (on ne peut cocher qu'un bouton et sélectionner un seul item de la liste).
Par contre pour un groupe de cases à cocher et une liste à choix multiple c'est un peu plus compliqué ...

En JS les noms jeux[] & sports[] ne sont pas valides ; on identifie donc le groupe (de cases et d'items) via une classe d'où les instructions :
var jeux = document.querySelectorAll('.cases') & var sports = document.querySelectorAll('.multiple')
Puis pour chaque groupe une boucle permet de concaténer dans une variable les "value" des cases "checked" OU les "value" des items "selected".

Donc une classe CSS ne sert pas seulement à la mise en forme mais peut être utilisée pour un regroupement logique d'éléments du DOM.

Le rendu

Cliquez sur le bouton "traitement JS" après avoir renseigné correctement le formulaire, cliquez ensuite sur le bouton "traitement PHP".
Attention le resultat du traitement JS s'affiche sous le formulaire alors que le résultat du traitement PHP s'affiche dans une autre page.

Le traitement PHP

Pour info je vous communique le traitement PHP donc un extrait de la page "autres_controles.php". <h3> <?php echo "Votre genre : " . $_POST['sexe'] . "<br>"; echo "Votre tranche d'âge : " . $_POST['age'] . "<br>"; echo "Vos jeux de société pratiqués : " ."<br>"; foreach($_POST['jeux'] as $jeu) {echo $jeu . "<br>";} echo "Les sports que vous pratiquez : " . "<br>"; foreach($_POST['sports'] as $sport) {echo $sport . "<br>";} ?> </h3>

Il existe dans mon site un tutoriel d'initiation au langage PHP.
Mon tuto sur PHP et MYSQL

Traduction

Tutoriel sur JS natif, Vue.js, jQuery.js & Node.js

JavaScript natif

Framework Vue.js

Framework jQuery.js

Node.js

Tutoriel JavaScript - recherche

L'auteur : Patrick Darcheville

Les formulaires HTML & JavaScript

Formulaires simples

Premier exemple : la concaténation

Le code CSS et HTML

Le script

Le rendu dans un Iframe de "concatenation.htm"

Deuxième exemple : puissance carré d'un nombre entier ou décimal

Le code HTML

Le script

Le rendu dans un Iframe

Des applications en ligne HTML5 & JS

Formulaires de soumission

Thématique : inscription à un site

Première solution : pas de script !

Le code

Tests

Deuxième solution : avec un script

Le code HTML

Le script associé au formulaire

Test

Remarque importante

Troisième solution

Le code avec emploi de "event.preventDefault()"

Test

Afficher le mot de passe

Le code HTML

Le script

Le rendu

Formulaire comprenant des champs masqués

Thème

Le code HTML

Le script

La page "cible.php"

Le rendu

Les autres contrôles

Exemple

Le code HTML

Le script

Le rendu

Le traitement PHP