Validation de formulaire en HTML5

HTML5 propose de nouveaux types de champs et des nouveaux attributs qui facilitent la validation de formulaires. Ces nouveautés s’appliquent aux navigateurs récents.

Nouveaux types d'<input>

HTML5 propose une douzaine de nouveaux types de champs. Le site Alsacreation liste ces douze types. Les principaux sont détaillés ci-dessous.

email

Un champ de type « email » est un champ proche du type « text ». Il attend au minimum un caractère suivi d’un @, suivi à son tour d’un caractère.

url

Comme pour le type « email », le type « url » attend un format bien spécifique : le format d’une URL. Tous les types d’URL sont admis (ftp://, mailto:, http://, etc…).

number

Le type « number » permet de renseigner une valeur numérique. L’affichage du champ diffère en fonction du navigateur. Ce type ne fait aucune vérification lors de la validation, mais si l’utilisateur saisit du texte à la place d’un nombre, aucune valeur ne sera retournée. Ce type de champ permet également de présenter le clavier numérique sur les smartphones.

tel

Le type « tel » permet de renseigner un numéro de téléphone. Comme pour le type « number », aucun format spécifique n’est attendu, mais le clavier numérique sera proposé sur smartphone. La vérification du format peut se faire à l’aide de l’attribut » pattern ».

Nouveaux attributs

placeholder

« placeholder » est un attribut qui indique un texte indicatif sur le contenu attendu dans le champ. Ce texte s’efface quand l’utilisateur commence à saisir son contenu.

required

L’attribut « required » indique que le champ est obligatoire. Le formulaire ne peut être validé tant que le champ n’est pas renseigné.

Les éléments requis peuvent être stylisés de la manière suivante :

pattern

L’attribut « pattern » permet de bloquer la validation d’un formulaire si les champs ne correspondent pas aux patterns spécifiés. Les erreurs sont indiquées à l’utilisateur par des infobulles.

Pour appliquer un style aux éléments valides et invalides, il faut utiliser les pseudo-classes :valide et :invalide.

Sources :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.