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(). Ces boites de dialogue ne sont pas très ergonomiques.

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.

Formulaires sans soumission

Je désigne par cette expression un formulaire qui se contente de gérer les entrées et sorties correspondant à un script.
Donc un formulaire utilisé pour éviter l'utilisation des boites de dialogue prompt(), confirm() & alert().

Dans ce type de formulaire les attributs method & action de la balise FORM sont inutiles. Par ailleurs l'élément button doit être de type "button" pour appeler une fonction JS sur clic.
En effet pour un élément button inclus dans le conteneur FORM le type par défaut est "submit" alors qu'en dehors d'un formulaire il est de type "button".

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

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.
Astuce : notez une balise LABEL vide afin que le bouton de commande se positionne en dessous des champs de saisie.
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".

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 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()

Le rendu dans un Iframe

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

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

Des applications en ligne HTML5 & JS

En combinant dans une même page du code HTML5, du CSS3 et du JS il est possible de réaliser des applications en ligne.
En lien deux applications qui peuvent vous être utiles :
-Calculette en ligne
-Boite à couleurs

Contrôle de saisie

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 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 deviennent 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 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 par le navigateuér 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 JS ; 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, HTML ne vous est d'aucun secours puisque la notion de test n'existe pas dans ce langage ; il faut rajouter un script de contrôle.
La détection de l'évènement "soumission" peut alors se réaliser via HTML (attribut submit de la balise FORM) ou par le gestionnaire d'évènements de JS (formulaire.onsubmit = fonction()).

Première solution : sans script

Le code

...
<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". Cette page cible réserve quelques surprises ...
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. Par contre si le type n'est pas précisé, l'élément button dans un FORM est par défaut de type "submit" donc sera bien un bouton de soumission.

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

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

Les quatre champs ne peuvent rester vide (attribut required).

Il y a donc de nombreux contrôles de saisie prévus par le code HTML5 et qui seront exécutés par le navigateur.

Tests

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

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

dupont@freefr
djpont@freee.fr
sesame62
sdsame62

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 contrôle via le HTML5.

Deuxième 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 ... <form name ="f" action = "inscription_trait.htm" target ="_blank" method ='post' onsubmit="return fenvoi()" > ... <button>Inscription</button> <h2></h2> </form>

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 true.
On combine donc deux catégories de contrôles de saisie : par HTML et JS.

L'élément button n'a pas l'attribut "type"; Comme il est inclus dans un formulaire, il est donc par défaut de type "submit".
Notez aussi la balise H2 vide ...

Le script associé au formulaire

function fenvoi()
{
	var compteur = 0 ;
	if(f.mail1.value == f.mail2.value) compteur++;
	if(f.passe1.value == f.passe2.value) compteur++;
	if (compteur < 2)  {document.querySelector('h2'). textContent = "champs mal renseignés"; return false; }
	else {return true;}
} // 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 éléments sont utilisés dans le cadre du script et le seront aussi dans le cadre du traitement PHP. Donc dans le cadre d'un formulaire de soumission il est conseillé d'utiliser l'attribut "name" plutôt que l'attribut ID.

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.

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 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. Par ailleurs 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 !

Contrôle de saisie : autre 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(). Donc tout le JS est bien regroupé dans le script ; plus de "scories" de JS dans le code HTML !

Au sujet de la méthode event.preventDefault()

Par défaut lorsque vous cliquez sur un bouton de type "submit" du formulaire vous adressez les données saisies vers le fichier précisé dans l'attribut "action".
Naturellement cette soumission n'est envisageable que si tous les champs obligatoires sont remplis.
La méthode preventDefault() permet d'annuler le comportement par défaut. Donc dans le cadre d'un formulaire elle permet d'interdire le soumission en cas de saisie incorrecte.

Exemple

Formulaire d'inscription : nouvelle solution

Tant qu'il n'y a pas égalité entre les adresses mail et les mots de passe saisie, la soumission est bloquée.

Le code correspondant

...
	<form name ="f" action ="destination.php" method ="get">
...
	<button type ="submit">Inscription</button>
	<h2></h2>
</form>
<script>
document.querySelector('form').onsubmit = function(event) 
{
  if (f.mail1.value != f.mail2.value || f.passe1.value != f.passe2.value)
  {
    event.preventDefault();
    document.querySelector('h2').textContent = "Les deux adresses mail et les deux mots de passe doivent être identiques entre eux !"
  }
  
} // fin fonction anonyme
</script>
...

Remarques concernant le code :

Code HTML : L'attribut "onsubmit ..." a disparu de la balise FORM. Les noms du formulaire et des champs sont identiques à la version précédente.
l'élément button doit être de type "submit" (de façon implicite ou explicite). Ici c'est de façon explicite.

Script : j'utilise à la place du gestionnaire d'évènements HTML, le gestionnaire d'événements de JS (document.querySelector('form').onsubmit = function(event))
La méthode preventDefault(), rattachée à l'objet "event" neutralise l'action par défaut liée à l'élément).
Si le test retourne false la soumission est bloquée (annulation de l'action par défaut du formulaire : la soumission) ; un message d'erreur est affiché dans la balise H2.

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 = "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"  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 "cible.php" avec la méthode POST.

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"

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

Testez ce code :

Traduction

Tutoriel JavaScript & jQuery - sommaire

JavaScript natif

JavaScript-jQuery

Tutoriel JavaScript & jQuery - recherche

L'auteur : Patrick Darcheville

Les formulaires HTML & JavaScript

Formulaires sans soumission

Premier exemple

Le code CSS et HTML

Le script

Le rendu dans un Iframe

Deuxième exemple

Le code CSS & HTML

Le script

Le rendu dans un Iframe

Des applications en ligne HTML5 & JS

Contrôle de saisie

Première solution : sans script

Le code

Tests

Deuxième solution : avec un script

Le code HTML

Le script associé au formulaire

Test

Remarque importante

Contrôle de saisie : autre solution

Au sujet de la méthode event.preventDefault()

Exemple

Formulaire d'inscription : nouvelle solution

Le code correspondant

Afficher le mot de passe

Le code HTML

Le script

Formulaire avec champs masqués

Thématique

Le code HTML

Le script

La page "cible.php"