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.

Articles en rapport :