Tutoriel HTML - sommaire

HTML5 : des formulaires améliorés

Le traitement des données envoyées par un formulaire (utilisation du PHP et SQL) n'est pas évoqué dans cette page.

Exemple de formulaire HTML5

Ce formulaire permet de s'inscrire à un centre de vacances.

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 INPUT, les nouveaux attributs pour cette balise.

Lorsque vous cliquez sur le bouton de soumission, les données sont envoyées vers la page cible seulement si le contrôles programmés en 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 par le navigateur".

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

Il faut peut-être rappeler que dès qu'il s'agit d'un formulaire de soumission (pour envoyez des données vers une page) deux attributs sont obligatoires dans la balise form les attributs action, method
L'attribut action précise la page qui va récupérer les données si la soumission est un succès et alors cette page va s'afficher ! Les données peuvent être adressées dans la même page que celle qui contient le formulaire de soumission ; la valeur de l'attribut action est alors #
L'attribut method prend pour valeur get ou post.

Nouveaux attributs de la balise 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

Une expression régulière définit un gabarit de saisie. Tant que la saisie ne correspond pas à ce gabarit la soumission des données sera bloquée.

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, button, submit, reset) 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
• date : permet de saisir une date proche de la date actuelle très facilement car un calendrier appparait

Attention les nouveaux types de champs ne sont pas forcément encore implémentés sur les vieux navigateurs et sont alors traités comme des champs de type text

Les boutons de commande

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

Testez ce code

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 !

Contrôle de saisie par navigateur et par script

En plus du contrôle par 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 par le code HTML ('contrôle navigateur') a ses limites ...

Thématique : 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> ...

Comme les contrôles par HTML sont insuffisants, ils sont complétés par un script.
En effet 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 ...

Remarquez que l'élement "button" est de type "submit" pour que la soumission puisse avoir lieu.

La syntaxe de la balise FORM est particulière pour bénéficier des contrôles HTML et JS : ... on submit ="return fenvoi()".
Ce qui signifie qu'il y a soumission (avec contrôle du navigateur) seulement si la fonction JS "fenvoi()" retourne true.

Inscrivez vous sur notre site