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 moderne

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

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 majuscules et espaces' 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 : 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 dans un nouvel onglet! Les données peuvent être adressée 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.

Nouvelles valeurs de l'attribut type

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. Il est donc conseillé de ne pas encore utiliser les input type = "date"
La solution alternative consiste à utiliser des champs texte associés à la méthode datepicker() de jQuery UI ou encore de créer trois input type ="number" ou encore trois select (listes).
Il y a dans ce site (dans le tuto "JavaScript") des pages sur jQuery et sur jQuery UI. Ainsi vous pourrez découvrir la saisie d'une date avec le widget "datepicker".

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

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 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 opérants !
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 donc 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 définis par l'attribut pattern.

Autres valeurs possibles de l'attribut type pour la balise input

Exemple

Le code du formulaire :

<form action = '#' method = 'post' onsubmit ="faffichage()"> <label>URL de votre site : </label> <input type = 'url' required /> <label>votre couleur préférée :</label> <input type = 'color' required id ="couleur" /> <label>Date du jour :</label> <input type = 'date' required id ="datejour"/> <label>mois courant :</label> <input type = 'month' required id ="mois" /> <label>semaine courante :</label> <input type = 'week' required id ="semaine" /> <label>Heure courante :</label> <input type = 'time' required /> <label>Votre âge (en années) :</label> <input type = 'number' required /> <label>Votre taille (en centimètres) : </label> <input type = 'range' min ="100" max ="210" step ="5" id ="taille" onchange="document.getElementById('taille2').value=this.value;" /> <label>Taille saisie : </label> <input type = "text" readonly id ="taille2" /> <label></label><button type = 'submit' name = 'validez' >Validez</button> </form>

Observez bien l'instruction form

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

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é à l'input de type range

... onchange="document.getElementById('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 affichée dans un champ de type text qui est en lecture seule et identifié taille2.
Cette instruction JS en ligne permet de récupérer la valeur saisie.

Le script :

function faffichage() { alert("votre couleur : " + document.getElementById('couleur').value) ; alert("date courante : " + document.getElementById('datejour').value) ; alert("mois courante : " + document.getElementById('mois').value) ; alert("semaine courante : " + document.getElementById('semaine').value) ; alert("votre taille : " + document.getElementById('taille').value) ; }

Ce script affiche quelques valeurs saisies via le formulaire.

A vous de jouer !

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