Accueil

Traduction

Tutoriel HTML - sommaire

Tutoriel HTML - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

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.

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.

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

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