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.
Révisions HTML4 - les tableaux & les formulaires

de nouveaux types de champs INPUT
de nouveaux éléments : BUTTON et OUTPUT (balises doubles)
de nouveaux attributs de balise

CSS3 n'est pas en reste et propose de nouvelles pseudo-classes associées aux champs de saisie.
Vous aurez l'occasion de les découvrir en lisant cette page.
Le traitement JS est aussi amélioré ; la nouvelle méthode event.preventDefault() bloque la soumission des données si celles-ci ne sont pas valides.

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

Digression CSS

Ci-dessous, extrait de la feuille de style :

	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' >
	<label>prénom (en lettres minuscules y compris accentuées) : </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 \.]{14}$' placeholder ='00.00.00.00.00' >
	<label>autre n°tél : </label>
		<input type = 'tel' optional pattern = '^[0-9 \.]{14}$' placeholder ='00.00.00.00.00' >
	<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'>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)

Chaque attribut pattern a pour valeur une expression régulière.

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.

^[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 \.]{14}$ : autorise uniquement la saisie de chiffres, point ou espace.

Notez que chaque expression régulière commence par ^ et se termine par $. Ce qui signifie que le contenu du champ doit correspondre strictement à cette expression ni plus ni moins.
Ainsi si vous saisissez dans un des champs tel la chaine : "mon tel est 01 02 03 04 05", celle-ci passe au rouge, le texte avant / après une suite de 14 chiffres, espaces et points n'est pas autorisée.

Mon propos sur les regExp est ici fort sommaire.
Pour en savoir davantage sur la construction des regExp : les regExp

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

Nouveaux éléments

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

Pour afficher un résultat dans le formulaire il est préférable d'utiliser l'élément output.
Voir un exemple à la fin de ce chapitre.

Testez le formulaire en lien

Ci-dessous un formulaire pour réserver un séjour dans un centre de vacances.

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 votre séjour !

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 si le bouton de soumission est de type "submit".

Un formulaire de soumission bien écrit

Je vous montre maintenant comment programmer un formulaire de soumission avec de surcroît un contrôle de saisie "côté client" efficace car comprennant des contrôles HTML et un script JS.

Le document "inscription_bis.htm"

Objet du formulaire : inscription à un site coquin (créer son espace perso).

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

La feuille de style

	input:valid {color : lime;}
	input:invalid {color : red;}

Le code du formulaire

...
<form  name ="f" action = "inscription_trait.htm"   target ="_blank" method ='post' style ="border : none;">
<h4>Vous devez saisir votre adresse mail en guise d'identifiant et choisir un mot de passe</h4>
     <p><label>Tapez votre adresse mail : </label>	
		<input type = "email"   name ='mail1' required />
	 <br><label>Confirmez votre adresse mail : </label>	
		<input type = "email"  name ='mail2' required />
	<br><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'>
	<br><label>Confirmer le mot de passe : </label>
		<input type = "password" required  pattern = '^[A-z0-9]{6,8}$'  maxlength ='8' name ='passe2' >
    <br><label></label><button type ="submit">Inscription</button>
</form>
<h4 id ="message"></h4>
...

L'élément BUTTON est de type submit donc les contrôles de formulaire (via les attributs required & pattern) sont bloquants.

Le script

var message = document.querySelector('#message') ; 
document.querySelector('form').onsubmit = function(event) 
{
  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

Notez comment la fonction anonyme est appelée : document.querySelector('form').onsubmit : sur tentative de soumission du formulaire.

Remarquez l'utilisation de la méthode preventDefault() appliquée à un objet de type "event".
Donc si le test retourne false le comportement par défaut du formulaire (la soumission) est annulé.
Par contre si le test retourne true alors la soumission est effective.

Le nom de l'objet de type "event" est libre ; j'aurais pu utiliser "e" ou "evt" ou "evenement".

Testez

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_trait.php") donc la soumission est bloquée.

Saisissez enfin deux adresses mail correctes et identiques ainsi que deux mots de passe corrects et identiques..
Vous accédez alors à la page cible : "inscription_trait.php".

Remarque importante

Le contrôle "côté client" ne dispense pas d'un contrôle de saisie "côté serveur" (via un script PHP ou Python).
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.

Pour en savoir davantage

Dans mon tuto sur JavaScript, je consacre tout un chapitre sur JavaScript et les formulaires
Vous découvrivrez de nombreuses astuces JS dans le cadre des formulaires.

Les nouveaux types de la balise INPUT

Dans l'exemple qui suit je présente quelques nouveaux types de l'élément INPUT.

Le code du formulaire

...
<body>
<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 même page que celle contenant le formulaire.

Avec un champ de type "range" il est difficile de savoir la valeur saisie. il est conseillé de lui associer une balise OUTPUT qui affiche sous forme d'un texte la valeur saisie de le INPUT. Voir la fin de ce chapitre ...

Dans le champ de type "number", je peux saisir un décimal si l'attribut step est à "any".

Les champs de type "range" & "number" autorisent les attributs min & max & step.

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.

Rendu dans un Iframe

Après une saisie correcte, les données soumissionnées apparaissent sous le formulaire par exécution d'un script PHP.

Saisissez :
autour de 130 dans le premier champ
5.5 dans le second champ

sélectionnez la couleur "rouge" avec la palette

Traduction

Tutoriel HTML - sommaire

Révisions HTML4

La spécification HTML 5

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

HTML5 : des formulaires améliorés

Exemple de formulaire HTML5

Digression CSS

Le code HTML du formulaire

Étude du code du formulaire

L'élément FORM

Nouveaux attributs de INPUT

Les expressions régulières (RegExp)

Nouveaux types de champs

Nouveaux éléments

Testez le formulaire en lien

Ce qu'il ne faut pas faire !

Un formulaire de soumission bien écrit

Le document "inscription_bis.htm"

La feuille de style

Le code du formulaire

Le script

Testez

Remarque importante

Pour en savoir davantage

Les nouveaux types de la balise INPUT

Le code du formulaire

Rendu dans un Iframe

à propos du PHP

L'élément OUPUT

Exemple

Le code correspondant

Digression CSS : de nouvelles pseudo-classes pour les champs numériques

Le code d'un document HTML

Le rendu dans un Iframe de ce document HTML

Utilisez la nouvelle méthode de détection des évènements

Le code du formulaire

Le script en JS moderne