Retourner à la page d'accueil de TJS

Les formulaires en Javascript - Contrôles de saisie

Pourquoi le contrôle de saisie

Le contrôle de saisie d'un formulaire côté navigateur doit être vu comme une aide à l'utilisateur pour le guider dans le remplissage de son formulaire, pour lui faire gagner du temps et lui éviter des erreurs de saisie. Le but est bien d'augmenter le taux de transformation de vos formulaires en limitant la frustration, les abandons ou les saisies inexploitables.

Attention, le contrôle de saisie en JavaScript ne garantit aucunement que les données envoyées dans le formulaire vers le serveur sont valides. Un utilisateur malintentionné peut envoyer au serveur toutes les données qu'il souhaite, même des données non prévues dans le formulaire d'origine. Il est impératif de vérifier la saisie à la soumission du formulaire sur le serveur. Voir le tuto Traiter un formulaire avec PHP.

Contrôle et ergonomie

En gardant à l'esprit l'objectif d'assistance à l'utilisateur pendant sa saisie, la question du contrôle de saisie ne peut être séparée de son efficacité et de son ergonomie.
Avec la multiplication des typologies d'appareils disponibles, l'affichage des indications et des erreurs de saisies doit être parfaitement réfléchi.
Avec l'immensité des choix de sites offerts aux utilisateurs, l'efficacité prime sur l'originalité.

Il existe de nombreux modules tout faits et à intégrer avec une seule ligne de code, en particulier en jQuery qui rendent le travail de contrôle très simple. Nous allons voir ici les grands principes qui s'appliquent à ces systèmes.

L'assistance à la saisie

La première manière de fiabiliser une saisie et d'éviter les erreurs est de donner la bonne information à l'utilisateur.

Donnez des indications sur ce qui est attendu, en utilisant les possibilités du HTML comme l'attribut placeholder qui renseigne une saisie d'exemple dans le champ :

<input type="email" placeholder="mail@serveur.com">

qui affichera :

Facilitez le clic sur une case à cocher en utilisant la balise <label> avec l'attribut for qui s'attache à l'élément de même id

<input type="checkbox" id="case"><label for="case">Je suis d'accord<label>

qui permet de cocher ou décocher la case en cliquant sur le libellé et pas seulement sur la case input qui impose de viser une toute petite zone de quelques pixels de dimension :

Tutoriel écrit par webmaster mis à jour le

Chercher une fonction, un objet, ...

Le 22/07/2018 07:09:41 sur php7 en 20.06 ms