Tutoriel HTML - sommaire

HTML5 : des formulaires améliorés

Je vous conseille à revoir éventuellement la spécification HTML4 en matière de formulaire.
HTML4 - les tableaux & les formulaires
Tout ce que vous lirez dans ce chapitre 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 le contrôles HTML 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 @ alors la soumission est bloquée et des messages (différents selon les navigateurs) apparaissent. C'est pour cette raison qu'on parle de contrôle "navigateur" pour désigner les contrôles découlant du code HTML.

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

Dans la feuille de style nous avons associé quatre nouvelles pseudo-classes* au sélecteur 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

Donc dans l'exemple :
• 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

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

Une expression régulière comprend deux parties :
• entre crochets une classe indiquant les caractères autorisés
• entre accolades un quantificateur (nombre de caractères autorisés)

Observons les expressions régulières dans le formulaire :
• [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 la balise INPUT

Outre les valeurs anciennes (text, hidden, password) il existe désormais les types suivants :
• 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. Pour être valide la saisie ne doit comporter que des chiffres et le séparateur décimal
• date : permet de saisir une date proche de la date actuelle très facilement car un calendrier appparait

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 à accéder à la page cible ("form_saisie.php").
Tant qu'une saisie est incorrecte le texte est en rouge mais passe au vert dès qu'elle devient valide.

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

Ce qu'il ne faut pas faire !

Attention les contrôles de saisie grâce aux attributs pattern & required ne sont actifs que si la soumission s'opère avec un bouton de validation de type "submit" (input ou button).

Exemple de code où les contrôles par les attributs required & pattern sont inopérants

Soumission via la méthode "submit()" de JavaScript.

Le rendu

Même si les champs sont mal renseignés ou pas renseignés on accède à la page cible.
Donc pour utiliser les contrôles "navigateur" le bouton de validation doit être impérativement de type "submit" (la méthode "submit()" de Javascript est à bannir).

Contrôle de saisie par navigateur et par script

En plus du contrôle 'navigateur' (découlant de l'emploi des attributs required & pattern et des types de champs) il peut y avoir un script de contrôle. En effet le contrôle 'navigateur' a ses limites comme je vais vous le montrer dans l'exemple ci-dessous.

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

Il faut que non seulement les saisies respectent un gabarit (défini par le type de INPUT) ou par l'attribut "pattern". Mais il faut en plus que les deux adresses mail saisies soient identiques et les deux mots de passe le soient.
Or HTML est incapable de faire des comparaisons d'où la nécessité d'un script.

Remarquez que l'élement "button" est de type "submit" pour activer les contrôles 'navigateur'.

La syntaxe de la balise FORM est particulière on submit ="return fenvoi()".
Ce qui signifie que si la fonction "fenvoi()" retourne VRAI il y a soumission sinon la soumission est bloquée.

Tests

Faites des erreurs de saisie : deux adresses mail différentes OU ne respectant pas le 'pattern' ; deux mots de passe différents ou ne respectant pas le gabarit : soumission bloquée.
Et enfin saisissez deux adresses mail identiques et correctes et deux mots de passe identiques et correctes : la soumission est effectuée.

Inscrivez vous sur notre site

Ssisir un nombre décimal

Pour terminer ce chapitre une remarque concernant les champs de type "number".
Attention un INPUT de type "number" n'autorise que la saisie d'entiers sauf si vous rajoutez l'attribut step='any'.
Un champ de type "number" autorise aussi les attributs "min & max". Ces deux attributs sont argumentés avec des bornes numériques.

Exemple

Observez bien tous les attributs des balises input type ="number" ...
Notez aussi l'attribut onsubmit dans la balise FORM : sur soumission appel de la fonction alert().
Il ne s'agit pas à proprement parler d'un formulaire de soumission mais le bouton de commande de type "submit" combiné avec l'attribut "required" bloque la validation si l'un des champs n'est pas renseigné.

Le rendu dans un Iframe

Vous êtes obligé de remplir les deux champs pour afficher le message.