Utiliser un formulaire

Les formulaires sont constitués de quelques modules relativement simples et standardisés - des champs - permettant à l’internaute de transmettre des informations au site (par exemple pour passer une commande ou pour poser une question au Webmaster).

Ces "champs de formulaires" sont utilisés par les développeurs de sites Web depuis les origines d’Internet « grand public » (première moitié des années 90).

Malgré la sophistication actuelle des moyens de traitement informatiques (langages informatiques, nouvelles couches d’abstraction, haut débit, etc.), ce sont toujours les mêmes formulaires que vous retrouvez aujourd’hui sur le web pour réaliser des choses très surprenantes.

Une grande partie de l’interactivité du "Web 2.0" (Wiki, blog, web communautaire, etc.) ne pourrait même pas être envisagée sans l’usage de formulaires.

C’est la raison pour laquelle il me semble indispensable de se familiariser avec les termes utilisés et les logiques sur lesquelles reposent les formulaires. En dehors de l’aspect « culture générale », il m’arrive de constater que beaucoup de personnes rencontrent de difficultés faute de pouvoir prendre en main de façon intuitive ces outils.

Les principaux champs de formulaires

De façon la plus classique, on vous demandera de taper (ou coller) un texte dans un « champ texte » prévu à cet effet.

Un champ de saisie texte classique

Cas particulier, le champ "mot de passe", permet de saisir, comme le nom l’indique, un mot de passe. Dans ce cas, afin de préserver la confidentialité de votre saisie, les caractères apparaissent à l’écran sous forme de points ou d’étoiles. Cela signifie donc que vous ne pouvez pas vérifier le contenu de votre saisie à l’écran. Par contre, rien ne vous empêche, a priori, de coller un texte préalablement copié depuis un fichier.

Un champ de saisie de type mot de passe

D’autres champs sont représentés sous forme de cases à cocher, carrées. Cela permet à l’internaute de choisir des propositions prédéfinies en cliquant sur des cases (un clic pour activer, un deuxième clic pour désactiver). Le formulaire peut présenter indifféremment les cases pré-cochées ou décochées ; c’est à vous de décider si vous souhaitez conserver la configuration proposée.

Une case à cocher pré-cochée

Une case à cocher décochée, après avoir cliqué dessus

Une variante de la case à cocher se présente sous une forme ronde ; on parle, alors, de bouton radio ; dans ce cas, on donne la possibilité de ne choisir qu’une proposition, parmi les autres et à l’exclusion des autres (ce qui n’est pas le cas des cases à cocher, qui permettent de cumuler plusieurs choix dans un groupe de propositions).

Une zone de boutons radio (ronds), propose un choix exclusif ; alors que les cases à cochées permettent de cumuler les choix (le formulaire de Yahoo ne proposant pas de bouton radio, j’ai utilisé un autre exemple).

Il est très fréquent que des formulaires proposent des listes d’options prédéfinies que l’utilisateur doit faire défiler de façon à sélectionner en cliquant sur l’une (ou, plus rarement, plusieurs d’entre elles).

Une liste à options. Il faut cliquer à droite, sur la petite flèche pour développer la liste et choisir l’une des options.

Dans certain cas, le site propose à l’internaute d’envoyer un fichier qui se trouve sur son ordinateur. Pour cela, le webmestre intègre à sa page un champ du type « file », lequel se présente, le plus souvent par un bouton sur lequel est inscrit « parcourir ». En cliquant sur ce bouton, l’internaute ouvrira un explorateur de fichier, lequel permettra de localiser le fichier à envoyer. Il devra alors sélectionner ce fichier puis cliquer sur le bouton « ouvrir » de l’explorateur. Après cette étape de sélection, il faudra valider l’expédition du fichier depuis l’ordinateur de l’internaute jusqu’au site en cliquant sur un bouton « Envoyer » « Télécharger » ou « Joindre les fichiers » (exemple ci-dessous).

Un champ permettant de joindre un fichier à un message (sur le webmail de Yahoo)

Une autre page permet d’envoyer un ou plusieurs fichiers en cliquant sur les boutons « Parcourir »

L’explorateur de fichiers de l’internaute permet de sélectionner le fichier. Il faut ensuite cliquer sur le bouton « Ouvrir »

Dernière étape : on valide le téléchargement depuis l’ordinateur de l’internaute jusqu’au site Web en cliquant sur le bouton « Joindre les fichiers » (dans cet exemple).

De plus en plus souvent, les concepteur Web intègrent à leur formulaire des rubriques d’aide, symbolisées par le caractère  ? (point d’interrogation). Cela est sensé vous aider à remplir le formulaire.

Une rubrique d’aide, qui apparaît au survol du  ? par la souris

Une fois que le formulaire est rempli on peut alors valider : soit on clique sur un bouton qui comporte une mention du type "Envoyer" ou "Valider", soit on tape la touche "ENTER" du clavier.

Le bouton de validation, accompagné, éventuellement, d’un autre bouton d’annulation

Contrôle des champs de formulaires et autres comportements interactifs

La plupart des concepteurs de sites obligent l’internaute à "renseigner" une partie ou la totalité des champs de formulaire. Pour cela, on distingue les "champs imposés" des "champs facultatifs" en ajoutant au premier des signes distinctifs (étoiles, caractères gras, etc.). Il arrive parfois que ce soient, au contraire, les champs facultatifs qui comportent les signes distinctifs (comme sur le formulaire du webmail de la poste).

Le plus souvent, aussi, c’est le contenu même des champs textes qui sera contrôlé : avez-vous tapé une adresse e-mail valide, votre date de naissance (ils sont quand même bien curieux, non ?) est-elle tapée selon la forme JJ/MM/AAAA ?

Bref, la saisie d’un formulaire ne doit pas être prise à la légère, au, risque de se voir renvoyer un refus aussi têtu et obstiné que peut l’être une procédure automatique !

Il faut savoir que le détournements "malicieux" et carrément crapuleux peuvent être effectués assez facilement sur un formulaire non protégé et trop permissif ; voilà donc pourquoi vous devez comprendre et accepter que ces restrictions de saisies soient appliquées ; dès lors que les informations demandées restent dans la limite de ce que vous estimez pouvoir indiquer concernant votre vie privée. Si tel n’est pas le cas ; n’hésitez pas : fermez la fenêtre !!!

Dernière chose : il existe une touche du clavier qu’il vaut mieux utiliser avec beaucoup de circonspection lorsque vous remplissez un formulaire ; c’est la touche "ENTER" (ou Entrée). Hormis le cas particulier où votre point d’insertion se trouve à l’intérieur d’une zone de texte multiligne, la touche "Enter" du clavier sera toujours interprétée comme une validation du formulaire. Donc, cela peut générer des erreurs, notamment si vous appuyez sur "Enter" sans avoir rempli tous les champs imposés... Il peut arriver que la répétition d’erreurs de ce type entraîne le blocage d’une inscription ; la seule solution consistant alors à vider le cache du navigateur (cliquer sur le menu « Outils/ Options »), puis à fermer le navigateur pour le relancer et recommencer la saisie.

Sachez que si vous voulez utiliser votre clavier pour passer d’un champ à un autre, c’est avec la touche TABULATION qu’il faut le faire. Pour plus de précisions sur le clavier, consultez ce support.