août

13

Améliorer ses formulaires

Catégorie: Webmastering | Commentaires fermés | 519 lectures

Les formulaires permettent d'ajouter de l'interactivité à des pages web statiques. Un formulaire de contact est un bon moyen pour obtenir un retour de l'internaute. Un formulaire de recherche avancée est un bon moyen de rechercher des produits dans une grande base de données. Un quiz, un sondage, une enquête de satisfaction, l'adhésion à une newsletter... voilà toutes des fonctions basées sur le formulaire. Voici quelques petits trucs et astuces pour améliorer ses formulaires.

Méthode d'envoi

Un formulaire est habituellement destiné à être traité par un programme sur le serveur. L'attribut action permet de définir l'adresse où sera envoyé le formulaire pour traitement. Cet attribut est le seul obligatoire.

1
2
3

<form method="post" action="mail-send.php">
</form>

Il existe deux manières d'envoyer le contenu d'un formulaire; la méthode post et la méthode get. La première, la plus utilisée, fait passer les informations à envoyer dans le corps de la requête HTTP et permet d'envoyer des informations plus conséquentes. La seconde est moins discrète puisqu'elle affiche les valeurs du formulaire dans la barre d'adresse au moment d'envoyer la requête au serveur. Elle est recommandée dans un des critères suivants:

  • aucune information envoyée n'est secrète (mot de passe)
  • la quantité d'information est limitée à 256 caractères
  • deux soumissions avec les mêmes paramètres renvoient toujours la même information

La méthode GET est utile après une recherche. Imaginons un formulaire pour rechercher un bouquin en particulier. Les résultats seront affichées sur une page dont l'URL est entièrement visible. Elle peut alors être enregistrée en favoris et s'afficher à tout moment, ce qui est impossible avec POST.

Codage des données

Lorsqu'un formulaire est envoyé, les données sont codées de façon à ne pas perturber la requête HTTP. Le programme serveur qui rçoit les données doit pouvoir comprendre ce codage pour les relire. Vous pouvez, pour ce but, définir quel codage sera employé.

L'attribut enctype défini la façon de traiter les données. Si vos données ne contiennent que du texte, utilisez text/plain. Par contre si votre formulaire contient des fichiers à envoyer, utilisez multipart/form-data.

1
2
3

<form method="post" action="mailto:paul@mail.com" enctype="text/plain">
</form>

Mot de passe caché

Le champ destiné au mot de passe affiche des astérisques plutôt que des caractères afin d'éviter les regards indiscrets présents devant l'écran d'ordinateur. Il ne s'agit en aucun cas d'un système de codage complexe. Il suffit d'aller voir le code source pour faire apparaître en clair le mot de passe.

Autoriser certains types de fichier à envoyer

La balise <input type="file"> permet à l'internaute de sélectionner un fichier local pour l'envoyer sur votre serveur. Théoriquement, l'attribut value peut définir l'emplacement par défaut du fichier mais les navigateurs désactivent généralement cette possibilité pour des raisons de sécurité.

Vous pouvez restreindre le choix à une liste de types de contenu autorisés séparés par des virgules, en la spécifiant dans l'attribut accept. On y trouve en vrac text/plain pour les textes, text/html pour les pages HTML, application/xml pour le XML, image/png pour les images au format PNG, ou plus généralement image/* pour tous les types d'images. Le support par les navigateurs de cette propriété n'est malheureusement pas toujours très bon.

1
2
3

<form action="..." accept="text/plain, text/html">
</form>

Désigner les champs

À chaque champ de formulaire doit être attribué un nom (name) et un identifiant (id). Le premier sert à identifier les données qui sont soumises, le second à identifier des éléments dans la page en cours de visualisation. Seul l'identifiant est unique, deux éléments peuvent envoyer une donnée sous le même nom. Utiliser les mêmes valeurs pour les deux attributs vous épargnera toutefois beaucoup d'erreurs dans vos développements.

Pour les boutons « Envoyer » et « Effacer » il n'est pas nécessaire d'indiquer une valeur name. Et en ce qui concerne cette valeur, il est recommandé de la remplacer par id en XHTML.

Regrouper les champs

La balise <fieldset> permet d'organiser l'information par bloc au sein d'un formulaire. Par exemple, pour la recherche d'un bien immobilier, les données personnelles (nom, adresse, profession) font parties d'un groupe et les préférences de recherche (achat, vente, prix, lieu) font partie d'un autre groupe. Chaque partie étant dans un fieldset séparé. L'élément legend sert de description au groupe. Il sera affiché à l'écran et lu par les lecteurs appropriés.

1
2
3
4
5
6
7
8
9
10
11
12
13

<form action="...">
<fieldset>
<legend>Etat Civil</legend>
<label for="nom">Nom:</label> <input type="text" id="nom">
<label for="pren">Prénom:</label> <input type="text" id="pren">
</fieldset>
</form>

Bouton Effacer

Évitez d'utiliser le bouton « Effacer ». Son utilité est plus que douteuse et génère de nombreuses erreurs de distraction, surtout si celui-ci est positionné juste à côté du bouton « Envoyer ». Lire l'article de J. Nielsen: « Reset: dont use ».

Qui est aussi stupide pour compléter un formulaire et ensuite vouloir supprimer ce travail fastidieux ? Pratiquement personne, à l'exception peut-être des sites d'achat en ligne. Dans ce cas précis, un reset annule et supprime toutes les informations. Il rassure l'utilisateur que ses données ne sont pas conservées.

Un autre aspect intéressant, c'est que ce bouton ne supprime pas le contenu de tous les champs mais remet à zéro le formulaire. La différence se situe au niveau des champs complétés par défaut au chargement de la page et qui peuvent apporter une aide à l'utilisateur.

Aider le lecteur dans la gestion des erreurs

Sollicité à faire des choix et à remplir des champs, le formulaire est une source d'erreur. Grâce à un peu de programmation, les conditions de validation évitent la distraction. Les formulaires plus évolués sont réactifs en temps réel. Ils permettent d'identifier les maladresses directement sans attendre la validation en bas de page. Les messages d'assistance ou d'erreur sont clairement mis en valeur.

Formulaire Yahoo
Formulaire réactif sur Yahoo.fr

Navigation

L'attribut tabindex permet de spécifier un ordre de parcours dans les champs de formulaire. Il doit contenir une valeur numérique entière, l'accès sera ordonné par cette valeur. Vous permettrez au visiteur d'accéder aux éléments, via la touche Tab, dans l'ordre le plus pertinent, et leur évitez ainsi une recherche et un accès qui peuvent être longs ou complexes suivant leur handicap et logiciel.

Dans l'exemple ci-dessous, la navigation ne semble pas très logique mais on pourrait imaginer des champs de formulaire répartis sur plusieurs colonnes. 

1
2
3
4
5
6
7

<input type="text" name="ftab0" value="Tab 1" tabindex="1">
<input type="text" name="ftab2" value="Tab 3" tabindex="3">
<input type="text" name="ftab1" value="Tab 2" tabindex="2">
<input type="submit" name="Submit" value="Tab 4" tabindex="4">

Lier les éléments entre eux

L'élément label (étiquette en français) établit une relation logique entre l'intitulé et le champ du formulaire. Cette balise est indispensable à la compréhension du formulaire pour de nombreuses personnes employant des méthodes de navigation alternatives. Sans elle, ces personnes seront dans l'impossibilité de comprendre le rôle de chaque champ et de remplir le formulaire.

Cette facilité sert également l'ergonomie du site. Selon des études (cf. « Loi de Fitts), plus la zone cible est petite, plus grande est la difficulté de l'utilisateur. Concrètement, l'utilisateur peut cliquer sur l'intitulé du champ pour cocher le bouton radio en question. Il en va de même pour les champs ou les zones de texte.

1
2
3
4
5

<label for="gof">
<input type="radio" name="fformats" id="gif" value="gif" checked>GIF
</label>

Attribut name déprécié

L'attribut name des éléments a, applet, form, frame, iframe, img et map est déprécié et ne peut plus être employé en XHTML.

Nombre maximum des caractères

Le concepteur a la possibilité de limiter le nombre de caractère de chaque champ (input) grâce à l'attribut maxlength. Cela peut être utile pour les plus distraits. Il n'y a par contre aucun moyen en XHTML de contraindre le visiteur lorsqu'il se trouve dans une zone de texte (textarea). Il faut alors recourir à des scripts spécifiques.

Masquer la barre de défilement

Un navigateur efficace comprend qu'il est inutile d'afficher un ascenseur dans la zone de texte si le contenu ne dépasse pas cette zone. Internet Explorer ne l'a toujours intégré. Pour effacer cet ascenseur grisâtre, l'attribut style="overflow:auto;" - de l'élément textarea - empêche cet effet.

Ascenseur dans Internet Explorer
Ascenseur dans Internet Explorer

Champ texte non modifiable

Dans l'exemple ci-dessous, j'ai utilisé respectivement les attributs disabled et readonly. Le premier indique que le champ est totalement désactivé. Dans ce cas, il n'est pas éditable, il ne reçoit pas le focus et il n'est pas transmis pendant l'envoi du formulaire. Le second indique que le contenu ne peut pas être changé par l'utilisateur mais seulement affiché. En XHTML, les attributs doivent avoir une valeur. Il faut alors leur donner le nom de l'attribut comme valeur: <input type="text" disabled="disabled">.

   

Positionner le curseur dans le premier champ

À l'ouverture du site de Google, le curseur de la souris se positionne automatiquement dans le champ de recherche. Pour y arriver, il suffit d'ajouter un peu de code dans le body et de remplacer la valeur nom par l'identifiant (id) du champ dans lequel le pointeur sera mis par défaut à l'ouverture de la page.

1

<body onLoad="document.getElementById('nom').focus()">

Pour compléter votre lecture


Commentaires

Les commentaires sont fermés pour cette note.