Philippe Didiergeorges Aka Philess

Nouveautés HTML5 pour les formulaires

Les formulaires, présents depuis les débuts de l'HTML avec ses champs de saisies connus de tous, ont bien évolués avec les nouveautés d'HTML5.
L'introduction de nouveaux types de champs sémantiques et de nouveaux outils pour la validation de la saisie simplifie le travail du développeur qui était jusque là obligé de palier à ces manques bien souvent avec du JavaScript.
Dans cette article seront présentés les nouveaux types de champs de saisie ainsi que l'utilisation des nouvelles propriétés pattern, required et placeholder.

Les nouveaux types de champs

• input text: zone de saisie de texte sur une ligne
• input password: zone de saisie de mot de passe (caractères cachés)
• input radio: puce de sélection unique
• input checkbox : puces de sélection multiples
• select: liste de proposition
• textarea: zone de saisie de texte multi-lignes
• input submit: bouton de validation du formulaire
• input reset: bouton de remise à zéro des champs
• input button: bouton générique pour toute autre action scriptée

Ces champs, s'ils ont le mérite de couvrir la plupart de besoin obligeaient les développeurs à toute une gymnastique de vérification en javascript à la saisie et ...

HTML5 nous propose ainsi les nouveaux champs suivants:

• input Email
  • Syntaxe: <input type="email">
  • Rendu : Rendu identique à un champ de type texte mais avec une validation sur le format de la saisie
  • Sur smartphones et tablettes tactiles, le clavier affiché propose des touches spécifiques telles que "@" et ".com"

• input Téléphone
  • Syntaxe: <input type="tel">
  • Rendu : Rendu identique à un champ de type texte mais avec une validation sur le format de la saisie
  • Sur smartphones et tablettes tactiles, le clavier affiché propose alors les chiffres pour la saisie du numéro
  • Support : La validation du format de saisie n'est pas encore pris en charge par Internet Explorer 10 et donc pour les applications Windows 8. Il faut alors utiliser la propriété pattern afin d'effectuer la validation.

• input URL
  • Syntaxe: <input type="url">
  • Rendu : Rendu identique à un champ de type texte mais avec une validation sur le format de la saisie
  • Sur smartphones et tablettes tactiles, le clavier affiché propose des touches spécifiques telles que "/" et ".com"

• input Search
  • Syntaxe: <input type="search">
  • Rendu : Rendu identique à un champ de type texte. Une croix apparait à droite dans le champ quand du texte est saisi, permettant d’en effacer tout le contenu.

• input Number
  • Syntaxe: <input type="tel">
  • Rendu : Rendu identique à un champ de type texte mais avec une validation sur le format de la saisie
  • Support : Sur smartphones et tablettes tactiles, le clavier affiché propose alors les chiffres pour la saisie du numéro

• input Range
  • Syntaxe: <input type="range" min="valeurMini" max="valeurMaxi" step="valeur">
  • Rendu : Slider horizontal ou vertical permettant de sélectionner une valeur, dans l’intervalle définit par les propriétés min et max, en faisant glisser un curseur sur un axe avec une granularité définie dans la propriété step
  • Support : Supporté par Safari sur desktop et IOS, Chrome, Opéra et Internet Explorer. Firefox en version desktop et mobile ne supportent pas ce type de champs et affichent champ de type text, avec clavier numérique sur mobile. Le navigateur d’Android quand à lui n’affiche rien du tout.

• input DateTime, Date et Time
  • Syntaxe: <input type="datetime/datetime-local/date/time">
  • Rendu : Sur Safari, IOS et Opéra, affiche des contrôles type date/time picker, spécifiquement prévus pour sélectionner une date et une heure, et un simple champ texte sur les autres navigateurs (avec un clavier numérique sur Android et Windows phone)
  • Support : Une validation du format de saisie sera nécessaire pour les navigateurs ne proposant de support spécifique.
  • Un datetime permettra de sélectionner la date et l’heure en précisant un fuseau horaire, contrairement au datetime-local.

• input Month et Week
  • Syntaxe: <input type="month/week">
  • Rendu : Sur Safari, IOS et Opéra, affiche des contrôles spécifiques pour sélectionner un mois ou une semaine et un simple champ texte sur les autres navigateurs
  • Support : Une validation du format de saisie sera nécessaire pour les navigateurs ne proposant de support spécifique.

• input Color
  • Syntaxe: <input type="color">
  • Rendu : Opéra affiche une palette de couleur sur desktop et mobile
  • Support : Hormis sur Opéra, tous les navigateurs affichent à e jour un champs de type text sans validation spécifique.

Les nouvelles propriétés: required, pattern et placeholder

A ces nouveaux types de champs s’ajoutent des attributs permettant d’en étendre encore les capacités :

• L’attribut Pattern
  • Syntaxe: <input type="text" pattern="[A-Za-z]{3}" >
  • Fonctionnement : La valeur de l’attribut définit le format d’une saisie valide à l’aide d’une expression régulière
  • Support : Cette propriété n’est pas supportée par Safari.

• L’attribut Required
  • Syntaxe: <input type="text" required="required" >
  • Support : Cette propriété n’est pas supportée par Safari.

• L’attribut PlaceHolder
  • Syntaxe: <input type="search" placeholder="Nom du client" >
  • Fonctionnement : La valeur de l’attribut définit la valeur d’information affichée dans le champ quand celui-ci est vide.
  • Comportement : La valeur du placeholder est affichée de base en grisée et dès que l’utilisateur donne le focus au champ celle-ci disparait pour laisser place à la saisie
  • Support : Bien supporté par toutes les plateformes modernes. Pour les ancien navigateur ne supportant pas, il faudra prévoir le fallback en JavaScript (avec JQuery DefaultValue par exemple)

Cet article a introduit les nouveautés en terme de formulaire HTML5. Le prochain article présentera des solutions afin de pouvoir améliorer le support et la personnalisation du style de nos éléments de formulaire à destination d’écrans tactiles.