Passez aux formulaires HTML5

Faire un formulaire sur un site est en soit pas très difficile, en revanche faire en sorte que vos utilisateurs le remplissent correctement est plus complexe car il faut vérifier que les champs sont bien renseignés. HTML5 apporte de nouvelles fonctionnalités qui permettent de réduire les vérifications et çà c’est vraiment appréciable.

Voici quelques avancées liées à l’utilisation des nouvelles balises HTML5 dans les formulaires :

L’attribut “placeholder”

“placeholder” permet de spécifier une indication dans le champs afin que l’utilisateur ait un modèle, vous pouvez aussi lui donner des indications pour renseigner ce champs. Placeholder s’ajoute de la manière suivante :

<input id="nomstructure" name="nomstructure" type="text" placeholder="exemple : école Jean Jaurès">

L’attribut “required”

Souvent dans les formulaires vous avez des informations obligatoires que l’utilisateur va devoir renseigner, afin de rendre obligatoire ces dernières vous devez utiliser l’attribut “required”

<input id="nomstructure" name="nomstructure" type="text" placeholder="exemple : école Jean Jaurès" required>

Un champs qui ne doit avoir que des chiffres

La nouveauté avec HMTL5 c’est que l’on peut préciser des patterns que la réponse devra avoir, par exemple vous demandez un code postal à l’utilisateur, dans ce cas il peut être judicieux de ne demander à n’avoir que des chiffres. Cerise sur la gâteau sur un smartphone, cela sera le clavier numérique qui sera affiché :

<input id="cp" name="cp" type="text" pattern="[0-9]*" size="40" maxlength="5">

Le maxlength permettra de réduire le nombre d’entrées à 5 digits, logique pour un code postal en France.

Un champs date

Si vous demandez à l’utilisateur de renseigner une date, l’utilisation d’un calendrier permettra d’avoir une date dans un format que vous saurez exploiter. HTML5 propose nativement un champs date avec le calendrier qui s’affiche automatiquement.

<input type="date" name="calendrierdebut">

Un champs email

L’email est un basique des formulaires de contact, alors autant avoir une adresse sans erreur, le champs “email” des formulaires HMTL5 gère cela parfaitement il suffit de préciser le “type” en “email” comme cela :

<input type="email" name="email">

Un champs nombre

Si vous ne souhaitez n’avoir que des nombres par exemple pour demander le nombre d’enfants, vous pouvez utiliser le “type” “number” comme cela :

<input id="nbrenfants" name="nbrenfants" type="number">

Un champs téléphone

Idem pour les champs spécifiques aux numéros de téléphone, sur ce coup HTML5 ne va pas directement nous aider mais grâce aux patterns on va pouvoir s’en sortir.

Voici le champs pour un téléphone générique sans espace ni séparateur :

<input type="tel" name="tel" pattern="^0[1-689][0-9]{8}$" placeholder="exemple : 0102030405 sans espace ni tirets" required>

Pour un numéro de mobile on peut faire ceci :

<input type="tel" name="telmobile" pattern="^0[6-7][0-9]{8}$" placeholder="exemple : 0611001025  sans espace ni tirets" required>

Voici ci-dessous un exemple de formulaire complet sur lequel vous pouvez faire quelques tests :
















Plus d’information sur cette page.

7 Comments

  • 1
    November 24, 2012 - 4:35 pm | Permalink

    Depuis 2012, je rappel q’un numéro de téléphone mobile peut commencer par 07 ! Attention à vos patterns 🙂

  • 2
    Henri Labarre
    November 24, 2012 - 4:47 pm | Permalink

    @Tilotiti bien vu!

  • 3
    November 26, 2012 - 11:45 am | Permalink

    Hum … tout ça est très bien mais de façon pratique ce n’est pas encore implémenté !
    Voici mes résultats pour des test réalisés sur les navigateurs usuels de bureau  (à ce jour et à jour …) :
    – le calendrier ne s’affiche pas sous Firefox, ni sous Safari qui propose simplement un élément pour augmenter / diminuer la valeur du jour de la date (comme un nombre standard)
    – la validation des champs obligatoires et des patterns n’est pas prise en compte par Safari
    – Chrome est celui qui réagit le mieux (calendrier affiché, validation mise en avant par une petite icône colorée, impossibilité de rentrer les caractères non autorisés …)
    – je ne parle pas de IE qui ne prend même pas en compte les placeholder …
     
    Windows 7 64bits
    Safari : 5.1.7
    Chrome : 23.0.1271.64 m
    Firefox : 16.0.2
    IE : 9.0.8
     
    Adrien
    adrien@nethink.com

  • 4
    Henri Labarre
    November 26, 2012 - 11:49 am | Permalink

    @alasserr Effectivement tu as raison c’est pas encore complètement supporté par les navigateur. Sur ce lien tu trouveras toutes les compatibilités avec les navigateurs : http://www.wufoo.com/html5/

  • 5
    November 26, 2012 - 11:52 am | Permalink

    @Henri Labarre  @alasserr Merci pour le lien, intéressant !
    Mais quand on sait qu’il existe encore des gens utilisant IE6, il va falloir un certain temps avant qu’on ne puisse utiliser plus que HTML5 pour réaliser des formulaires convaincants 🙂

  • 6
    Henri Labarre
    November 26, 2012 - 11:53 am | Permalink

    @alasserr C’est vrai que c’est pénible mais je préfère jouer la carte de ceux qui ont des navigateurs à jour  😉

  • 7
    November 26, 2012 - 12:54 pm | Permalink

    @alasserr  @Henri Labarre Supporter IE6 de nos jours n’a plus vraiment d’intérêt.
     
    Actuellement, IE6 représente moins de 2% des visites françaises (1,46% sur tous mes sites internets). A partir de là se posent deux réflexions :
     
    – Ce nombre est maintenant inférieur à d’autres population web, comme les mal-voyants par exemple (qui sont de plus en plus actifs sur le web). Donc ça n’a plus grand intérêt de favoriser IE6 au détriment de l’accessibilité, du text-speech ou autre.
     
    – Il faut s’intéresser à la cible des visiteurs. On sait aujourd’hui que les utilisateurs d’IE6 sont à plus de 90% des professionnels n’ayant pas accès aux mises à jours ou utilisant les propriété système d’IE, bloqué par leur DSI. Ainsi, si on fait un site B2B, donc à destination des entreprises que l’on peut juger d’arriérées (désolé pour le terme péjoratif, mais je l’utilise tous les jours pour désigner les DSI de ces boîtes qui ne comprennent pas l’urgence de la chose) alors là oui, il faut penser à IE6. Il faut faire de même si notre site est destinée à une administration. Mais par contre, si le site est à destination des clients (B2C) alors c’est sans hésiter qu’il faut pousser la technologie aussi loin que l’on peu, quitte à lui forcer la main à mettre à jour son navigateur, pour son bien.
     
    Pour finir, même Microsoft a, depuis quelques mois maintenant, demandé publiquement à ce que IE6 soit abandonné. Alors je conseille fortement, sauf dans certains cas très précis, de ne plus se tourner vers cette version et de suivre les indications de Microsoft et Google, à savoir baser son développement sur le support d’IE8+.