Les formulaires HTML & JavaScript

Dans les exemples des chapitres précédents l'utilisateur communiquait avec le programme grâce à des fonctions de JavaScript : prompt(), confirm() & alert(). Ce n'est pas 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.
Il est donc préférable de toujours confier les entrées-sorties à un formulaire HTML auquel sera associé un script.
Nous aurons donc dans la page web un formulaire codé en HTML et un script JS.

Premier exemple

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

...
<style>
	label, input, button {display : inline-block ; width : 45% ; height : 40px ; 
		margin : 10px ; vertical-align : top ; }
	label {text-align : right ; }
...
<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>
...

Commentaire du CSS

Dans un formulaire on utilise surtout les balises input, label, button. Ces balises sont par défaut de type inline alors que la balise form est de type block. Or nous voulons avoir la légende (balise LABEL) du champ puis le champ de saisie (balise INPUT) alignés. Il faut donc que ces balises deviennent de type inline-block c'est à dire des boites qui se positionnent côté à côté tant qu'il y a de la place.

Ici chaque légende ou champ a une largeur interne de 45% de la largeur de la boite parente (FORM). Donc il y aura deux contrôles par ligne : l'élément LABEL et l'élément INPUT correspondant.

Commentaire du HTML

Les attributs action et method de la balise form sont ici inutiles puisque ce formulaire n'a pas pour objet de soumissionner les données saisies vers une autre page en vue d'un traitement PHP.

Astuce : notez une balise LABEL vide afin que le bouton de commande se positionne en dessous des champs de saisie.

Attention le bouton de commande doit être de type "button" car il est ici associé à une fonction JS. Si vous ne précisez pas le type d'un bouton il est par défaut de type "submit" et alors le script ne sera pas exécuté ...

Notez pour le troisième input l'attribut readonly. pour créer un champ en lecture seule et destiné à afficher le résultat du traitement.

Dans le code HTML, le formulaire, chaque INPUT et le bouton de commande disposent de l'attribut "name".

Le script

Il est d'une simplicité déroutante ! 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.
Dans ce script j'ai utilisé la propriété value, l'évènement onclick et la méthode focus()

Testez ce code !

Le script - autre solution

Même si je n'aime pas trop cette solution, je vous la propose quand même. C'est vous qui voyez.
Pour cibler un contrôle de formulaire on peut utiliser une autre syntaxe.

Le script devient alors : document.forms[0].elements[2].onclick = function () { document.forms[0].elements[3].value = document.forms[0].elements[0].value + " " + document.forms[0].elements[1].value ; document.forms[0].elements[0].focus(); }

Ce script mérite quelques explications.
Je n'emploie pas ici les noms du formulaire et des champs. Donc dans le code HTML, l'attribut name devient inutile.
C'est l'avantage de cette syntaxe, l'inconvénient c'est qu'elle est plus lourde ...
Dans la collection des formulaires (forms) de la page, il s'agit du premier (et unique) formulaire, donc il a l'indice 0.
Ce formulaire comprend des contrôle de type label (qui ne sont pas considérés comme des éléments), trois zones de texte et un bouton de commande.

la zone de saisie du nom est donc : elements[0]
la zone de saisie du prénom est donc : elements[1]
le bouton de commmande est donc : elements[2]
la zone de texte de concaténation est donc : elements[3]

Le script : troisième solution

Si vous avez associé à chaque contrôle de formulaire l'attribut ID, vous pouvez alors dans le script référencer chaque élément avec la méthode document.getElementById()

Deuxième exemple

Nous saisissons un nombre (entier ou décimal) dans un champ puis le carré ce nombre s'affiche dans un deuxième champ du formulaire.

Le code CSS & HTML

La feuille de style interne est strictement identique à celle de l'exemple précédant. Donc je vous communique uniquement le code de la partie BODY <form name ="f"> <label>Saisir un nombre :</label> <input type = 'number' name ="nombre" > <label></label> <button type = 'button' name ="bouton">Calculez le carré de ce nombre !</button> <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 HTML 5) donc on ne peut saisir dans ce champ qu'un nombre.
Tous les navigateurs récents ont implémenté le INPUT type number.
Sous Chrome on peut saisir dans ce champ un nombre décimal au format français (, en tant que séparateur).

Le script

Encore une fois il est très succinct puisque le contrôle de saisie est effectué via le formulaire. f.bouton.onclick =function() { var vnombre = f.nombre.value; f.carre.value = vnombre * vnombre; }

Le script ne présente aucune difficulté.

Essayez ce code !

Saisissez "12,00" ; ça marche !

Contrôle de saisie

Je vais maintenant évoquer l'emploi de JavaScript dans le cadre d'un formulaire de soumission c'est à dire un formulaire qui permet d'adresser des données en vue d'un traitement PHP, traitement qui modifie le plus souvent la base de données liée au site.
On reconnait un formulaire de soumission facilement ; les attributs action & method de la balise FORM sont alors obligatoires.

Dans ce type de formulaire avant toute tentative de soumission des données il faut procéder à un contrôle de saisie par le navigateur (ou contrôle 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.
En effet pour vérifier si un champ n'est pas vide ou si la saisie correspond à un certain gabarit vous n'avez plus besoin de JavaScript ; il suffit d'utiliser les nouveaux types de INPUT (email, number,date) ou les nouveaux attributs required et pattern de la balise INPUT.
Mais si vous devez comparer la saisie dans deux champs différents alors HTML ne vous est d'aucun secours puisque la notion de test n'existe pas dans ce langage. Mais heureusement il y a JavaScript !

Première 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.

Première solution : sans JavaScript

...
<style>
	label, input, button {display : inline-block ; width : 44% ; height : 30px ; 
		margin :10px 1% 10px 1%    }
	input:invalid {color : red; }
	input:valid {color : lime ; }
	button:hover {color : red ; box-shadow : 5px 5px 5px grey ; }
...
<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"
Page cible qui réserve quelques surprises ...

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 du traitement PHP (traitement qui ne sera pas évoqué).

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, etc sont interdits.

On ne ne peut saisir plus de 8 caractères (maxlength ="8").

Test 1

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

Faites le test !
Bravo! vous accéder à la page "inscription_trait". Donc vous avez pu soumissionner avec succès.

Test 2

dupont@freefr
djpont@freee.fr
sesame62
sdsame62

Faites le test !
On accède quand même à la page "inscription_trait" 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 HTML : impossibilité d'effectuer des tests.

Solution avec un script

Grâce à JavaScript il sera possible de comparer les deux saisies de l'identifiant et les deux saisies du mot de passe.

Le code HTML

Le code HTML reste inchangé sauf pour la balise FORM ...
Le bouton de commande doit rester de type "submit" ! <form name ="formulaire" action = "inscription_trait.htm" target ="_blank" method ='post' onsubmit="return fenvoi()" > ... <button type = 'submit'> inscription</button>

Notez dans la balise FOTM un attribut très étrange : onsubmit="return fenvoi()"

si "button" est de type "button" la soumission avec (contrôles de saisie prévus par HTML au préalable) n'est pas effectuée.
si "button" est de type "submit" c'est le script qui n'est pas exécuté

Or le bouton de commande est de type "submit" ...et le script doit être exécuté !

En rajoutant cet attribut il y a soumission (avec contrôles de saisie HTML) si la fonction JS "fenvoi()" retourne true.

Le script associé au formulaire

function fenvoi()
{
// variables
	var compteur =0 ;
	var mail1 = formulaire.mail1.value;
	var mail2 = formulaire.mail2.value;
	var passe1 = formulaire.passe1.value;
	var passe2 = formulaire.passe2.value;
	// test
	if(mail1 == mail2) compteur++;
	if(passe1 == passe2) compteur++;
	if (compteur < 2) {alert("champs mal renseignés");return false; }
	if (compteur==2) {alert("saisies correctes"); return true;}
} // fin fonction

Si égalité entre identifiants et égalité entre mots de passe alors compteur vaut 2.
La fonction retourne true si compteur vaut 2.

Faites des tests

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.

Faites le test !

Deuxième essai : saisir : toto@free.fr - toto@free.fr - abcedef -abcdef
Les mails et mots de passe sont identiques et le mail est correct (existence du caractère "@" dans la chaine) donc accès à la page cible.

Faites le test !

Remarque importante

Un contrôle des saisies côté client ( par le navigateur) 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 navigateur. Un utilisateur chevronné du Web peut accéder au code (via l'ongle "éléments" de la console) et 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 !

Afficher le mot de passe

Désormais sur beaucoup de sites et dans le cadre du formulaire de connexion, les caractères que vous saisissez dans un champ "mot de passe" peuvent être affichés.
Il suffit qu'un script transforme le type de ce champ : de "password" à "text".

Thématique : connextion à un site par identifiant et mot de passe.

Le code HTML

Remarque : le code du formulaire est incomplet : page cible non précisée, pas de bouton de soumission, etc. Je me focalise uniquement sur l'affichage/masquage du champ contenant le mot de passe. <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.
Un bel exemple de modification du DOM et plus préciséments des attributs.
Dans ce tuto il y a tout un chapitre sur la "manipulation du DOM via JS".

Testez ce code !

Formulaire avec 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 qui sont remplis via un script.

Thématique

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 = "destination.php"  method ='post' target ="_blank"
	onsubmit="return fenvoi()" >
	<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"  name ="masque1" >
	<input type ="hidden"  name ="masque2" >
	<button type ="submit">Connexion</button>
</form>

Remarquez les champs masqués : type ="hidden"
Les données renseignées sont transmises à la page "destination.php" avec la méthode POST.

Le script

function fenvoi()
{
	// remplissage champs masqués
	f.masque1.value = screen.width; 
	f.masque2.value = screen.height; 
	// instructions provisoires 
	console.log(screen.width);
	console.log(screen.height);
}

La page "destination.php"

...
<body>
<?php
	echo "identifiant est  : " .$_POST['identifiant'].  "<br>";
	echo "mot de passe est  : " .$_POST['motdepasse'].  "<br>";
	echo "largeur écran est  : " .$_POST['masque1'].  "<br>";
	echo "hauteur écran est  : " .$_POST['masque2'].  "<br>";
? >

Tests

Testez ce formulaire
La page vers laquelle sont adressées les données s'affiche dans un autre onglet.
Pour la page du formulaire, affichez la console JS.
Testez à partir d'un PC, d'une tablette, d'un smartphone.

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript

jQuery - célèbre bibliothèque JavaScript

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Les formulaires HTML & JavaScript

Premier exemple

Le code CSS et HTML

Commentaire du CSS

Commentaire du HTML

Le script

Le script - autre solution

Le script : troisième solution

Deuxième exemple

Le code CSS & HTML

Le script

Contrôle de saisie

Première thématique : inscription à un site

Première solution : sans JavaScript

Test 1

Test 2

Solution avec un script

Le code HTML

Le script associé au formulaire

Faites des tests

Remarque importante

Afficher le mot de passe

Le code HTML

Le script

Formulaire avec champs masqués

Thématique

Le code HTML

Le script

La page "destination.php"

Tests