DEVENIR-WEBMASTER.COM Log In
 32
close

Les champs de formulaires issus du HTML 5

Visiter ma chaine Youtube

# Introduction close

On va maintenant traiter les champs de formulaires qui sont apparus dans le HTML 5.

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.

# Les principaux champs HTML 5 close

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

Code html avec les principaux champs html 5

# Comment les utiliser ? close

Vous pouvez utiliser dès maintenant la plupart de ces champs HTML 5. Si 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.

Exemple : Informations concernant le format à saisir

# La validation du formulaire côté client close

required HTML 5 permet de s'assurer qu'un champ de formulaire est bien renseigné.

Code html avec utilisation de required

Exemple : validation avec l'attribut required

Test d'utilisation de required

Un certain nombre de contrôles sont fait 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

Expression régulière du filtrage avec attribut pattern

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

Exemple : une validation d'email avec l'attribut pattern

# Les claviers contextuels qui sont proposés sur smartphone close

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

Formulaire de test des nouveaux champs avec leur lien vers www.caniuse.com