203 – HTML5 – Les nouveaux champs de formulaire

Le HTML5 va permettre de faire un bond important pour la valisation des formulaires. Voici l’URL du chapitre consacré au formulaire dans la recommandation du HTML5 : https://www.w3.org/TR/2017/REC-html52-20171214/sec-forms.html#sec-formsConditions générales d’utilisation

Les nouveaux champs

1. L’affichage des nouveaux champs

Comme très souvent, la spécification du HTML5 ne précise pas comment doivent être affichés les éléments des formulaires. Chaque navigateur utilisera ses propres éléments d’interface. Il y aura donc de fortes différences entre un navigateur d’ordinateur, ceux des smartphones et ceux des tablettes.

Souvenez-vous que par défaut les champs de saisie sont de type <input type= »text »>, ce qui veut dire que si un navigateur ne reconnaît pas un nouveau type de champ, il l’affichera comme un champ de texte « classique ».

2. Le champ pour les e-mails

Le nouveau champ de saisie de type email permet de spécifier que le contenu doit être une adresse e-mail, c’est-à-dire qu’il doit y avoir le caractère @. C’est aux navigateurs de tester nativement la présence ou non de l’arobase et d’afficher éventuellement un message d’erreur.

La syntaxe : <input type= »email »>

Un autre intérêt indéniable est l’utilisation avec un smartphone qui reconnaît ce type de champ : le clavier va automatiquement s’adapter à la saisie d’une adresse e-mail.

Voilà le message d’erreur avec Google Chrome :

images/C09-001N.png

3. Le champ pour les numéros de téléphone

Le type de champ de saisie tel est fait pour saisir des numéros de téléphone.

La syntaxe : <input type= »tel »>

Il n’y a aucune contrainte de saisie, les numéros de téléphone étant trop variés dans le monde et pouvant aussi contenir des caractères autres que des nombres. Là encore, les smartphones pourront adapter leur clavier.

4. Le champ pour les URL

Le champ de saisie de type url permet la saisie des URL. La vérification d’une URL valide est laissée au bon vouloir des navigateurs.

La syntaxe : <input type= »url »>

Comme toujours, les smartphones peuvent adapter leur clavier à la saisie des URL.

Voici le message d’alerte affiché par le navigateur Google Chrome si l’URL saisie n’est pas valide :

images/C09-002N.png

5. Les champs pour les dates et les heures

Le champ de type date permet d’insérer une date. Mais plutôt que de laisser les utilisateurs saisir eux-mêmes les dates, avec les risques d’erreur, les navigateurs devront proposer nativement des interfaces de sélection de dates faciles à utiliser.

La syntaxe : <input type= »date »>

Voilà l’interface proposée par Google Chrome :

images/C09-003N.png

Il existe d’autres types pour saisir des dates :

  • le jour et l’heure avec le décalage horaire : <input type= »datetime »>
  • le jour et l’heure sans le décalage horaire : <input type= »datetime-local »>
  • la date uniquement : <input type= »date »>
  • l’heure uniquement : <input type= »time »>
  • les semaines uniquement : <input type= »week »>
  • les mois uniquement : <input type= »month »>

Voici un exemple de saisie d’heure avec Google Chrome :

images/C09-004N.png

Voici un exemple de saisie de date et heure avec Opera :

images/C09-005N.png

6. Le champ pour les valeurs numériques

Le champ de saisie de type number permet de ne saisir que des valeurs numériques. La validation de ce type de champ est comme toujours laissée libre par les navigateurs.

La syntaxe : <input type= »number »>

Ce type de champ accepte plusieurs attributs :

  • min : la valeur minimale acceptée.
  • max : la valeur maximale acceptée.
  • step : la valeur de l’incrément à utiliser dans l’interface.
  • value : la valeur déjà saisie.

Voici un exemple de syntaxe pour saisir une valeur numérique, avec un minimum de 18, un maximum de 100, par pas de 2 et avec une valeur initiale de 48 :

<input type="number" min="18" max="100" step="2" value="48" id="age" />

Voilà l’interface de saisie proposée par Mozilla Firefox :

images/C09-006N.png

7. Les réglettes avec curseur

Le champ de saisie range, mais qui ne propose pas de saisie, permet d’afficher une réglette avec un curseur pour choisir une valeur.

La syntaxe : <input type= »range »>

Ce type de champ peut utiliser les mêmes attributs que number.

L’affichage de la valeur choisie est fait avec un JavaScript :

<p> 
<label for="age">Indiquez votre âge : </label> 
<input type="range" min="18" max="100" step="2" value="48" id="age2" 
oninput="document.getElementById(’sortie’).textContent=value"> 
<output id="sortie">0</output> 
</p>

Voilà l’interface avec Safari :

images/C09-007N.png

8. Les champs de recherche

Le type search permet d’insérer un champ de saisie dédié à la recherche. L’affichage reprendra les canons d’interface du navigateur utilisé par les visiteurs, donc l’affichage peut être très varié !

La syntaxe : <input type= »search »>

Voilà l’affichage dans Safari :

images/C09-008N.png

9. Le champ de saisie suggérée

Ce champ de type datalist permet d’avoir un champ de saisie libre et avec en même temps les fonctionnalités d’une liste déroulante. Cela permet à l’utilisateur de saisir une valeur personnelle ou bien de choisir une valeur proposée existante.

L’élément datalist utilise les éléments classiques option pour les suggestions. Il faut utiliser conjointement un champ de type text et un élément datalist. La liaison se fait avec la valeur de l’attribut list d’input et l’id du datalist.

Voilà un exemple d’application :

<label for="liste-fruit">Un fruit : </label> 
    <input type="text" id="fruits" list="liste-fruit" /> 
    <datalist id="liste-fruit"> 
        <option value="Pomme"> 
        <option value="Fraise"> 
        <option value="Poire"> 
</datalist>

Voilà l’affichage avec Google Chrome :

images/C09-009N.png

10. Le choix d’une couleur

Ce dernier nouvel élément de formulaire permet aux visiteurs de choisir une couleur dans le système de choix des couleurs de leur OS.

La syntaxe : <input type= »color »>.

Voilà l’affichage avec Google Chrome sur Mac OS :

images/C09-010N.png

11. Les clés publiques

Si vous avez besoin d’envoyer une clé publique par un formulaire, utilisez l’élément <keygen>.