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

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.

Extrait de la feuille de style

... input:required {border : 2px solid red ; } input:optional {border : 1px solid black ; } input:valid {color : green ; } input:invalid {color : red ;} ...

Donc quand vous saisissez dans un champ le texte est d'abord en rouge puis bascule en vert dès qu'il devient valide (correspond au type et au pattern).

Le code HTML du formulaire

<form action = 'form_traitement.htm' 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' maxlength = '10'> <label>autre n°tél : </label> <input type = 'tel' optional pattern = '[0-9]{10}' placeholder ='dix chiffres' 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>

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.

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.

Nouveaux types de champs

HTML5 introduit de nouveaux types pour la balise input

Attention les nouveaux types de champs ne sont pas forcément encore implémentés sur tous les navigateurs et sont alors traités comme des champs de type text
Par exemple le type date n'est pas encore compris par Firefox et IE. La solution alternative consiste donc à utiliser un champ texte associé à la méthode datepicker() de jQuery UI.
Pour plus d'explications visitez le tuto "JS & jQuery".

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_traitement.htm").
Tant qu'une saisie est incorrecte le texte est en rouge mais passe au vert dès qu'elle devient valide.
A vous !

Contrôle de saisie en HTML5

Remarque très importante

Pour effectuer des contrôles de saisie avec HTML il ne suffit pas d'ajouter les attributs required et pattern mais il faut aussi que le bouton d'envoi soit de type submit !

Exemple : imaginons un formulaire pour s'inscrire à un site. Il faut choisir un pseudo puis un mot de passe.

Première solution

... <form action = "inscription_trait.htm" method ='post'> <p>Inscription à un site :</p> <label>Saisissez un pseudo :</label> <input type = "text" required pattern ='[A-z0-9]{6,8}' maxlength ='8' placeholder = 'entre 6 et 8 lettres ou chiffres'> <label>saisissez un mot de de passe : </label> <input type = "password" required pattern = '[a-z]{6}' maxlength ='6' placeholder ="6 lettres minuscules" /> <button onclick ="this.form.submit()">Envoi</button> </form> ...

Pour soumissionner les données j'utilise la méthode submit() de javaScript ( ... onclick =this.form.submit())

Testez ce code

Laissez les champs vides et cliquez sur le bouton "envoi" . Vous accéder quand même à la page "inscription_trait.htm" ...
Donc les contrôles prévus par les attributs required et pattern ne sont pas actifs !
En effet par défaut le bouton de commande est de type button et non pas submit ; les contrôles de saisie HTML ne sont alors pas effectués.
A vous!

Donc cette solution est donc totalement incorrecte !

Solution correcte

Le code est strictement identique sauf la ligne relative au bouton.

... <button type ="submit">Envoi</button> ...

Le bouton d'envoi est désormais de type submit !

Testons cette solution

A vous !

A chaque fois la soumission est bloquée sauf si les deux champs sont remplis avec des valeurs correspondant au type et aux masques de saisie (valeur de l'attribut pattern).

Les autres valeurs possibles de l'attribut type

Exemple

Le code HTML & CSS

... label,input, button {display : inline-block ; width : 45% ; vertical-align : top ; height : 30px ; margin-top : 10px ; } input:valid {color : green; } input:invalid {color : red ;} </style> ... <form name ="f" action = '#' method = 'get' onsubmit ="faffichage()"> <label>URL de votre site : </label> <input type = 'url' name ="url" required placeholder ="http:// ..." /> <label>votre couleur préférée :</label> <input type = 'color' name ="couleur" required /> <label>Date du jour :</label> <input type = 'date' name ="date" required /> <label>mois courant :</label> <input type = 'month' name ="mois" required /> <label>semaine courante :</label> <input type = 'week' name ="semaine" required /> <label>Heure courante :</label> <input type = 'time' name ="temps" required /> <label>Votre âge (en années) :</label> <input type = 'number' name ="age" required /> <label>Votre taille (en centimètres) : </label> <input type = 'range' min ="100" max ="210" step ="5" name ="taille" onchange="f.taille2.value=this.value;" /> <label>Taille saisie : </label> <input type = "text" readonly name ="taille2" /> <label></label><button type = 'submit' name = 'validez' >Validez</button> </form> ...

Observez bien l'instruction form

< form name ="f" action = '#' method = 'post' onsubmit ="faffichage()" >

Le formulaire est nommé "f". Les données sont envoyées dans la même page (action ="#"). Sur soumission appel de la fonction faffichage().

Notez bien le code JS associé à input type ="range" ... :
... onchange="f.taille2.value=this.value;"
Lorsque l'on utile un champ de type range on "saisit en aveugle", c'est pour cette raison que la valeur saisie via ce champ est transféré dans un champ de type text qui est en lecture seule et nommé taille2.

Le script

function faffichage() { alert(f.url.value + " "+ f.couleur.value + " " + f.date.value + " " +f.mois.value + " " + f.semaine.value + " " + f.temps.value + " " + f.age.value + + " " + f.taille2.value ); }

Ce script se contente d'afficher les valeurs soumissionnées dans une boite de dialogue.
Notez la méthode de référencer les champs du formulaire : nomformulaire.nomchamp.
C'est une méthode ancienne, aussi vieille que le JavaScript mais toujours valide. Elle offre l'avantage de se dispenser des attributs ID ; emploi seulement des attributs name (qui par ailleurs sont nécessaires dans le cadre d'un éventuel traitement PHP).
Testez ce code !

Remarquez que si vous avez sélectionné la couleur blanche dans la palette de couleur le champ contient #ffffff c'est à dire le code hexadécimal de la couleur.
Le mois sélectionné ; exemple : 2017-03 (troisième mois de l'année)
La semaine sélectionnée ; exemple : 2017-W11 (onzième semaine de l'année)
Retour menu