close

Les champs de formulaires issus du HTML 5

#1 Introduction open

On va maintenant traiter les champs de formulaires, qui sont apparus dans le HTML 5. Nous avons déjà traité les champs qui existaient déjà dans le HTML 4, et nous avons également traité les bases des formulaires.

Non seulement HTML 5 a apporté une importante liste de nouveaux champs de formulaires, mais en plus, ceux-ci sont plus élaborés. Qu'en est-il ?

  1. Les champs sont plus spécialisés. Par exemple, un champ de type email a été créé pour saisir un email. Cet email était saisi en HTML 4 dans un champ de type text.
  2. Les champs HTML 5 essaient de résoudre le problème de la validation du formulaire du côté client.
  3. Sur smartphones, des claviers 'contextuels' sont proposés suivant la nature des informations à saisir. Par exemple, sur un champ de type email, vous aurez un clavier avec le caractère arobase facilement accessible.

#2 Les principaux champs HTML 5 open

Vous avez ici un code qui embarque les principaux champs de formulaires HTML 5 :

Tester le code

#3 Comment les utiliser ? open

Vous pouvez utiliser dès maintenant (septembre 2018), la plupart de ces champs HTML 5. S'ils ne sont pas encore pris en charge, ils se comporteront comme un champ de type text. Toutefois, il faut informer l'internaute du format des données qu'il doit saisir.

Vous pouvez mettre cette information dans l'attribut placeholder. Elle sera visible uniquement lorsque le dispositif de navigation ne prendra pas en charge le champ de saisie.

Attention, vous devez mettre le format des données reçues qui peut être différent du format des données saisies. C'est le cas par exemple pour une date. Ci-dessous, j'ai saisi dans le champ date la valeur 11/09/2001 pour 11 septembre 2001 et côté serveur, j'ai comme chaîne de caractères utilisable pour cette date la chaîne 2001-09-11. Dans ce cas, il y a donc une transformation de format.

Le format d'un champ date côté client puis côté serveur.

Vous avez ci-dessous, une copie d'écran d'une exécution du programme ci-dessus sous Internet Explorer. Vous pouvez constater que les champs HTML5 de type date, time et datetime-local sont affichés comme des champs de type text avec le placeholder qui donne les indications sur le format à saisir. Notez l'importance de donner dans le placeholder le format côté serveur, car dans ce cas, il n'y aura pas de transformation du format comme c'est montré sur l'illustration précédente.

Champ HTML5 sous Internet Explorer
Tester le code

#4 La validation du formulaire côté client open

required HTML 5 permet de s'assurer qu'un champ de formulaire est bien renseigné. Ci-dessous, un exemple, dans lequel j'ai demandé la validation HTML5 avec l'attribut required.

Test d'utilisation de required
Tester le code

Un certain nombre de contrôles sont faits par défaut. Par exemple, il ne vous sera pas possible de soumettre un formulaire, si un champ de type email ne contient pas de caractère arobase.

filtrage email par défaut

Par contre, un 'marc.dupont@gmail' sans le .com est considéré comme valide. Vous pouvez trouver ça un peu léger. Dans ce cas, vous avez la possibilité d'éditer votre propre expression régulière et de la placer dans l'attribut pattern HTML 5

Dans ces conditions, le 'marc.dupont@gmail' est filtré. Le moins que l'on puisse dire, c'est que graphiquement, c'est avantageux par rapport à la popup JavaScript. Le seul inconvénient, c'est que vous n'êtes pas maître du contenu du message.

Message du filtrage avec attribut pattern
Tester le code

#5 Les claviers contextuels qui sont proposés sur smartphone open

On revient à l'exemple de la saisie d'un email. Le smartphone vous propose un clavier principal qui contient l'arobase. Vous n'avez pas besoin de recourir au clavier secondaire. Ce qui est le cas, pour un champ de type text.

Clavier de saisi d'un email sur smartphone

Vous avez à saisir un numéro de téléphone, le smartphone vous propose un clavier principal qui contient des chiffres.

Clavier de saisi d'un numéro de téléphone sur smartphone

Pour un rendez vous montez un écran pour saisir l'heure et la date

Clavier de saisi d'un date et heure sur smartphone