HTML5 : des formulaires améliorés

La spécification HTML5 introduit beaucoup de nouveautés pour les formulaires.
Je vous invite à revoir éventuellement la spécification HTML4 en matière de formulaire avant d'aborder toutes ces nouveautés.
HTML4 - les tableaux & les formulaires
Tout ce que vous lirez dans ce chapitre en lien est toujours valide en HTML5.

Exemple de formulaire HTML5

Ce formulaire permet de s'inscrire à un centre de vacances. Il s'agit donc d'un formulaire de soumission.

Le code inclut la plupart des nouveautés proposés par la version 5 de HTML et la version 3 de CSS relatives aux formulaires c'est à dire les nouveaux types de champs et les nouveaux attributs pour l'élément INPUT.

Lorsque vous cliquez sur le bouton de soumission, les données sont envoyées vers la page cible seulement si les contrôles de formulaire sont vérifiés.
Ces contrôles découlent de l'emploi des attributs required, pattern et de nouveaux types de champs (email, number, tel,etc.
Ainsi si un champ "required" est vide OU si un champ de type "number" contient du texte OU si un champ de type "email" ne contient pas le caractère @ alors la soumission est bloquée.
La soumission est aussi bloquée si la saisie dans un champ ne correspond par au pattern (gabarit de saisie).

Extrait de la feuille de style

Ci-dessous quelques règles de style pour gérer l'affichage des zones de saisie monoligne. ... input:required {border : 2px solid red ; } input:optional {border : 1px solid black ; } input:invalid {color : red ;} input:valid {color : green ; } ...

input

:required : mise en forme d'un champ obligatoire
:optional: mise en forme d'un champ facultatif
:invalid: mise en forme d'une saisie incorrecte (ou absence de saisie)
:valid: mise en forme d'une saisie correcte

un champ de saisie obligatoire sera borduré de rouge
un champ de saisie facultatif sera borduré de noir
tant que la saisie dans un INPUT sera invalide (ne correspond pas au "pattern" ou au type du INPUT), elle sera affichée en rouge et passera au vert dès qu'elle sera conforme au gabarit ou au type.

Le code HTML du formulaire

<form action = 'form_saisie.php' method = 'get'>
	<label>Nom (en lettres majuscules)  : </label>
	<input type = 'text' required 
		pattern = '[A-z\ ]{2,30}' placeholder ='lettres et espace' autofocus >
	<label>prénom (en lettres minuscules) : </label>
	<input type = 'text'  required 
		pattern = '[a-zéèêî\ ]{2,30}' placeholder ='lettres minuscules' >
	<label>téléphone  : </label>
	<input type = 'tel'  required 
		pattern = '[0-9]{10}' placeholder ='dix chiffres collés' maxlength = '10'>
	<label>autre n°tél : </label>
	<input type = 'tel' optional 
		pattern = '[0-9]{10}' placeholder ='dix chiffres collés' maxlength = '10'>
	<label>mail : </label>
	<input type = 'email'  required  
		placeholder ='____@___ .___' >
	<label>Date de début de votre réservation</label>
	<input type = 'date' required>
	<label>Nombre de jours de la réservation (entre 1 et 21) </label>
	<input type = 'number'  required min = '1' max = '21' >
	<label></label><button type = 'submit' name = 'validez' >Validez</button>
</form>

Étude du code du formulaire

L'élément FORM

Pas de nouveautés par rapport à HTML4.
Comme il s'agit d'un formulaire de soumission les attributs action & method sont obligatoires.

Nouveaux attributs de INPUT

optional : champ dont la saisie est facultative
required : champ dont la saisie est obligatoire
autofocus : champ sélectionné lors du chargement de la page
pattern : précise le masque de saisie à respecter sous forme d'une expression régulière ; voir ci-dessous
placeholder : affichage d'un texte dans le champ tant que le champ n'a pas été rempli

Les expressions régulières (RegExp)

Une expression régulière définit un gabarit de saisie. Si la saisie dans un champ "required" ne respecte pas ce gabarit la tentative de soumission échouera.

entre crochets une classe indiquant les caractères autorisés
entre accolades un quantificateur (nombre de caractères autorisés)

[A-Z\ ]{2,30} : autorise uniquement la saisie de lettres majuscules et de l'espace (entre 2 et 30 caractères)
[a-zéèêî\ ]{2,30} : autorise uniqment la saisie de lettre minuscules y compris les lettres accentuées et espace
[0-9]{10} : autorise uniquement la saisie de chiffres (10 chiffres ni plus ni moins)

Nouveaux types de champs

HTML5 introduit de nouveaux types pour l'élément INPUT

tel : le smartphone affiche un clavier approprié mais la saisie est libre
email : pour être valide la saisie doit comprendre le caractère @ ; sur un terminal tactile la touche @ est rajoutée dans le clavier
number : l'appareil mobile affiche un clavier numérique
date : permet de saisir une date proche de la date actuelle très facilement car un calendrier appparait
range : permet de saisir une valeur approximative comprise entre deux bornes via un curseur
color : permet de saisir un code couleur via une palette de couleurs

Les boutons de commande

Pour dessiner des boutons de commande dans un formulaire il est désormais conseillé d'utiliser la balise double button plutôt que la balise simple input type ='button/reset/submit'.
Les types possibles de l'élément BUTTON sont : "submit" (soumission des données), "reset" (effacement des données) et "button" (pour appeler une fonction JS).

Testez ce formulaire

Remplissez le formulaire !
Tant que vous laissez des champs vides ou remplis avec des valeurs invalides, vous n'arrivez pas à soumissionner.
Tant qu'une saisie est incorrecte le texte est en rouge mais passe au vert dès qu'elle devient valide.
Dès que les saisies sont correctes vous accédez à la page cible : "form.saisie.php" ; en d'autres termes il y a soumission.

Réservez un séjour dans notre centre de vacances !

Ce qu'il ne faut pas faire !

Attention les contrôles de saisie via les attributs pattern & required ne sont actifs que s'il s'agit d'un formulaire de soumission ; en d'autres termes s'il y a un élément INPUT (ou BUTTON) de type "submit" dans le formulaire.

À contrario, exemple de code où les contrôles via les attributs required & pattern sont inopérants

<form action ="inscription.php" name ="form">
	<input type ="number" step ="any"  required	placeholder ="Saisir un nombre entier ou décimal">
	<br><input type ="text" required pattern ="[A-Z ]{2,20}"
		placeholder ="Saisir un nom en majuscules" maxlength ="20">
	<br><button type ="button" onclick ="form.submit()">Soumission</button>
</form>

La soumission est réalisée via la méthode submit() de JavaScript appelée par un élément de type "button".

Le rendu

Même si les champs sont mal renseignés ou pas renseignés du tout, on accède à la page "inscription.php".
Donc la méthode submit() de JS associée à un élément de type "button" est à bannir car les contrôles de formulaire sont alors inactifs.

Contrôle de saisie par formulaire et par script

Je vous montre ci-dessous comment programmer un contrôle "côté client" (on dit aussi contrôle "navigateur") complexe.
Le contrôle est complexe car il est double : contrôle de formulaire complété par un contrôle par un script JS.

Le contrôle "côté client" ne dispensera pas d'un contrôle de saisie "côté serveur" (via le script PHP).
En effet un visiteur averti peut contourner les contrôles "navigateur" ; il lui suffit d'accéder au code source de la page et de supprimer les attributs required & pattern.

Théme : formulaire pour s'inscrire à un site (créer son espace perso).

Code de la page "inscription.htm"

Cette page contient outre le code du formulaire HTML, un script et une feuille de style.

La feuille de style

	label, input, button {display : inline-block ; width : 44% ; 
		height : 30px ; margin :10px 1% 10px 1% ;}
	input:valid {color : lime;}
	input:invalid {color : red;}

Le code du formulaire

...
<form  name ="formulaire" action = "inscription.php"   target ="_blank" method ='post' 
	onsubmit="return fenvoi()" >
<p>Vous devez saisir votre adresse mail en guise d'identifiant et choisir un mot de passe.</p>
     <label>Tapez votre adresse mail : </label>	
	<input type = "email" required  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>

La syntaxe de la balise FORM est particulière : ... action = 'inscription.php' ... on submit ="return fenvoi()".
Ce qui signifie que la soumission sera effective seulement si la fonction JS fenvoi() retourne true.
Les quatre champs sont obligatoires. Le type email impose la saisie d'un @. L'attribut pattern = '[A-z0-9]{6,8}' fixe aussi un gabarit.
L'élément BUTTON est de type submit donc les contrôles de formulaire (avec les attributs required & pattern) sont opérants.

Le script

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

D'après le script il faut que les deux adresses mail saisies soient identiques et les deux mots de passe saisis soient égaux.
Si les deux égalité sont vérifiées la variable compteur vaut 2.
Si compteur vaut 2 alors la fonction JS retourne true sinon elle retourne false.
L'envoi de données vers la cible (soumission) n'est effectif que si la fonction JS retourne true.

Tests

Faites des bêtises

Faites des erreurs de saisie : deux adresses mail correctes mais différentes ET deux mots de passe corrects mais différents.
Tous les champs passent au vert mais lorsque vous cliquez sur le bouton de soumission alors un message d'erreur s'affiche et vous n'accédez pas à la page cible ('inscription.php') donc la soumission est bloquée.
En effet la fonction JS retourne false.

Saisies correctes et égales deux à deux

Saisissez deux adresses mail identiques et correctes ainsi que deux mots de passe identiques et corrects.
Vous accédez enfin à la page cible : "inscription.php". En effet la fonction JS retourne cette fois true et donc la soumission est effective.

À vous de jouer !

Inscrivez vous sur notre site

Remarque

Il existe désormais en JS moderne une solution plus élégante pour conditionner la soumission à la valeur retournée par une fonction JS : la méthode event.preventDefault().
JavaScript les formulaires
Suivez ce lien et parcourez le chapitre : "JavaScript et les formulaires de soumission" pour en savoir davantage.

Autres valeurs de l'attribut type de l'élément INPUT

Dans le formulaire ci-dessous je manipule des INPUT de type number, range & color. Ces types n'ayant pas encore été traités dans ce chapitre.

Le code de la page

Le formulaire

...
<body>
<h2>Nouveaux types pour élément INPUT</h2>
<form id ="f1" action ="#" method ="get">
	<p><label>saisir un entier entre 0 et 255  : </label>
		<input type = 'range' min = '0' max = '255' step = '5' 	
		 name ="curseur"  required />
	<p><label>saisir un nombre entre 0 et 10 : </label>
		<input type = 'number' min = '0' max = '10' step = 'any' 	
		 name ="nombre"  required />
	
	<p><label>saisir une couleur : </label>
		<input type = 'color' 
		 name ="couleur"  required />
	<p><button type = 'submit' >Envoi</button>
</form>

<form ... action ="#" ... : les données sont envoyéees dans la page contenant le formulaire.

L'élément INPUT de type "range" permet une saisie approximative donc à ne pas utiliser pour une saisie qui doit précise.
Dans le champ de type "number", je peux saisir un décimal car l'attribut step est à "any".
Notez que les champs de type "range" & "number" autorisent les attributs min & max.
Le champ de type "color" permet de sélectionner couleur à partir d'une palette. Cette palette se présente de façon différente selon les navigateurs.

Le traitement en PHP des données soumissionnées

<h3>
 
</h3>
...

Je vous communique pour info le script PHP qui se content d'afficher les données soumissionnées.
Pour en savoir plus sur le traitement PHP des données de formulaire soumissionnées, suivez le lien ci-dessous.
Traitement en PHP des formulaires

Le rendu dans un Iframe

Renseignez les champs :
autour de 130 dans le premier
5.5 dans le second

sélectionnez la couleur "rouge" avec la palette ou les zones de texte ; le code RGB du rouge est : 255,0,0

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

La spécification HTML 5

Des API HTML utiles très pratiques

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville