Ne mettez pas de bouton ‘Reset’ dans vos formulaires !
C’est étrange de constater comme les habitudes ont la vie dure… Prenez par exemple les boutons ‘Reset‘ sur les formulaires : Je ne sais pas qui a eu cette idée folle, mais elle est incroyablement tenace.
J’ai déjà eu de nombreuses discussion à ce sujet, mais je profite du dernier édito de Jaokb Nielsen (Top-10 Application-Design Mistakes) pour vous le redire : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.
Qui a envie de supprimer toutes les données saisies d’un coup ? Qui va s’offusquer de ne pas se voir proposer cette fonction ? Quelle est l’intérêt pour vous ?
Donc une dernière fois : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.
Et ça sera mon dernier mot ! A vrai dire, je n’ai plus la force d’argumenter sur ce point, je me demande si je ne devrais pas fermer les commentaires pour ce billet…
Fred Cavazza a dit:
Mon point de vue sur le sujet : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.
/Fred
Fred Cavazza a dit:
Oui moi aussi je suis d’accord : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.
/Fred
Fred Cavazza a dit:
J’abonde dans le sens du commentaire précédent : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.
/Fred
IsLaCouL12 a dit:
Je suis d’accord avec le 1er commentaire
La seul conséquence d’ajouter un bouton RESET :
- RESETER alors qu’on ne le dire pas (après avoir tt encoder, cela donne pas envie de recommencer)
- Prendre plus de temps a trouver le bouton SUBMIT (qui ne doit jamais s’appeler ENVOI, mais bien, S’INSCRIRE, REPONDRE, VALIDER,… les gens n’en n’on rien a faire que cela envoie des info au serveur.)
IsLaCouL12 a dit:
Et je remarque a l’instant que pour poster cette réponse j’ai du appuyer sur ENVOYER. Mais j’envoie rien moi! Ça veut dire quoi ‘envoyer’ pour quelqu’un qui ne connait pas GET, POP et autre trucs de barbus ?
Là Fred, toi le roi de l’interface… tu me déçoit. Mais pas trop t’inquiète
Seb a dit:
Juste une petite remarque :
Le bouton RESET n’a pas pour but de supprimer toutes les données du formulaire mais bien de les remettre à leur état initial.
Bien sur, l’état initial d’un formulaire est 99% du temps vide, donc le raccourci est facile.
Mais dans de rares -très rares- cas, il est utile lorsque le formulaire est pré-rempli, que l’utilisateur n’a besoin de ne changer qu’une ou deux valeurs, et qu’il se trompe. Dans ce cas, le bouton RESET lui permet de re-remplir le formulaire avec ses valeur d’origine.
My 2 cents
Olivier D. ze kat a dit:
Désolé, mais le bouton RESET peut-être utile dans certains cas… Où le formulaire est mal foutu.
Explications:
Parfois, pour ne pas re-demander de tout re-saisir en cas d’erreur, les devs mémorisent les valeurs dans des cookies.
Si vous êtes sur un ordinateur public, vous risquez de vous inscrire avec les infos d’une autre personne :o|
D’un autre coté, le nom RESET, çà fait con, et ce n’est pas explicite… Autant faire un trés discret bouton “effacer les informations saisies”.
Mais bon, j’dis çà, c’est pour les formulaires mal foutu, et pour taquiner Fred :op .oO(c’est vrai que “Envoyer”, çà fait con aussi)
Yvan D. Reset a dit:
“Je ne sais pas qui a eu cette idée folle, mais elle est incroyablement tenace.”
Je me présente, John Reset, donc voilà je suis l’inventeur du bouton RESET qui a été repris et décliné sous plusieurs formes : RESTART, CLEAR, EFFACER, RECOMMENCER…
“C’est étrange de constater comme les habitudes ont la vie dure…”
C’est bien la preuve du succès de cette invention que je me suis empressé à faire breveter à l’époque.
“Donc une dernière fois : Ne mettez pas de bouton ‘Reset‘ dans vos formulaires.”
Bon. Je veux bien encore faire un effort pour diminuer les royalties, mais de grâce, cessez de vous attaquer à notre racket !
Fred Cavazza a dit:
“re-remplir le formulaire avec ses valeur d’origine”, voilà une très bonne idée. A votre avis serait-il possible de mémoriser les données initiale ainsi que les données saisies par l’utilisateur pour pouvoir proposer une fonction ‘Back’ qui serait dédié au formulaire (un peu comme la fonction ‘Undo’ des outils bureautiques).
/Fred
DJo a dit:
Tout à fait d’accord avec Fred !
Le nombre de fois ou j’ai cliqué par erreur sur reset au lieu de valider car j’étais pressé … résultat: Je n’ai pas toujours le courage de re-remplir le formulaire !
Supprimons les “Reset” !
Pti-seb a dit:
Bonne réflexion, à partir de maintenant je pense que je suivrais ton conseil, car effectivement, ce dernier ne sert pas à grand chose.
Seb a dit:
> “re-remplir le formulaire avec ses valeur d’origine”, voilà une très bonne idée
C’est bien le fonctionnement actuel “de base” du bouton RESET.
Pour s’en rendre compte, créer une page HTML avec un bête formulaire et un “input” de type text dont l’attribut “value” possède déjà une valeur.
Ouvrir cette page, le champ est bien pré-rempli avec la valeur (on peut imaginer une adresse de livraison par exemple, pré-remplie depuis une base de données suivant le client authentifié). Si on modifie la valeur et que l’on clique sur “reset”, la valeur d’origine revient bien.
rortelli a dit:
Un lien reset pour un formulaire prend sens lorsque les resultats sont affichés de manière asynchrone (en ajax) sur une page. Ca prend encore plus de sens lorsque le formulaire en question est complexe…
pickupjojo a dit:
Ce bouton est complètement inutile, et plus d’une fois celui-ci m’a découragé de tout recommencer suite à son utilisation inintentionnelle…
Gab Le Globule a dit:
Je pense que le bouton “input type reset” reste assez utile pour pouvoir permettre de faire un formulaire “vintage” sur son site, tendance qui reste à lancer, je pense notamment aux fond texture bois ou pierre et aux ombres portés sur tous les éléments graphiques sans exception.
Ceci dit, sa disparition pourrait tout à fait être remplacé par une fonction JS qui viderait tous les champs, ce qui rendrait plus technique l’application dudit design “vintage” qui deviendrait du coup beaucoup plus tendance car plus sélectif.
Donc… je sors.
Cédric Sadai a dit:
““re-remplir le formulaire avec ses valeur d’origine”, voilà une très bonne idée. A votre avis serait-il possible de mémoriser les données initiale ainsi que les données saisies par l’utilisateur pour pouvoir proposer une fonction ‘Back’ qui serait dédié au formulaire (un peu comme la fonction ‘Undo’ des outils bureautiques).”
La fonction technique du bouton reset est d’affecter à tous les éléments d’un formulaire soit le vide (si aucune valeur définie), soit la valeur de l’argument VALUE=.
Il est parfaitement possible de sauver de manière asynchrone le formulaire alors même que l’utilisateur le remplit (genre sauvegarde automatique dans gMail). On peut penser à activer une telle sauvegarde asynchrone (via xmlHttpRequest aka Ajax) sur chaque élément “onFocus()” (donc a chaque fois qu’on rentre sa souris sur un élément de formulaire). Dans ce cas, on peut recréer une fonction reset custom en javascript dont le rôle serait de réattribuer les dernières valeurs enregistrées automatiquement (donc celle enregistrée lors de la derniere prise de focus).
Pour faire simple, ce serait un bouton qui “RESETerait” automatiquement le dernier champ modifié, et uniquement lui.
++
Cédric
Fred du 92 a dit:
Désolé Eric mais pour une fois, je ne suivrai pas ton conseil.
Je développe une application avec une table de donnée au centre de la page. Dans la colonne de droite un formulaire permet de saisir les données pour filtrer sur un ou plusieurs champs en utilisant des signes du type “*, %, #, _” …
Sans le bouton RESET, je devrais effacer à chaque fois que je veux faire un nouveau filtre ou annuler le filtre.
Bon, c’est le seul cas pour lequel j’ai trouvé un intérêt au bouton RESET.
Fred du 92 a dit:
En commençant par désolé Fred, ce serait mieux.
Merci pour ce blog.
Mael a dit:
Il fallait effectivement fermer les commentaires. Les 3 premiers sont lamentables
Olivier D. ze kat a dit:
@Fred: tu me fais penser à une fonction méconnue de Yahoo! UI qui permet de gérer un historique des actions en Javascript… On pourrait détourner çà en proposant deux boutons UNDO/REDO à la place de l’affreux RESET ;o) .oO(hard-coding, là)
Sur mon labs.miaouw.net j’ai cité une idée de “formulaires sérialisés” sans avoir le temps de détailler que l’on découpe le formulaire en étapes qui sont unifiées sur une seule page via l’AJAX. Avec çà, on peut s’abstenir du UNDO/REDO et les RESET deviennent moins dramatiques :o”
Pistil Design a dit:
Mais oui, quand on y réfléchit, ça se tiens!!! Et pourtant, à la base ça partait d’une bonne intention, donner des options à l’internaute.
Mais celle ci est absolument inutile, au contraire, elle peux pousser l’internaute à supprimer son propre message, tellement l’ergonomie rappelle le bouton “envoyer”..
Bon j’attends un article sur ce qu’il faut mettre dans input “value” pour le bouton envoyer…
marti a dit:
je suis d’accord avec le billet, mais j’ai une autre question a proposer à fred, comment faire pour conjuguer accessibilité et interface riche car souvent les interfeces riches ne sont pas accessibles.
amelie boucher a dit:
En tout cas, si un bouton “reset”, “annuler” ou autres “effacer” est indispensable (c’est parfois le cas dans des interfaces outils, applicatives), il faut penser à protéger les internautes contre une erreur de clic.
cf. quelques remarques et conseils sur ce genre de bouton:
“Ce défaut [bouton reset dans un formulaire] est d’autant plus grave si le bouton dangereux :
> est situé sur la droite de l’écran (comme s’il constituait la suite logique de l’action) ;
> se trouve près du bouton de validation ;
> possède un format comparable au bouton de validation ;
> a le format d’un bouton non dangereux (vert, bleu, souriant) ;
> est situé en bas de formulaire ;
> permet d’effacer un nombre important de données ;
> ne propose pas de message de confirmation suite au clic.
Si vous êtes obligé d’employer un tel bouton, essayez donc de faire tout l’inverse ! Présentez le de la manière suivante :
> plutôt sur la gauche de l’écran ;
> loin du bouton de validation ;
> dans un format différent et moins fort que le bouton de validation
(par exemple : plus petit, un lien hypertexte plutôt qu’un bouton, moins foncé, etc.) ;
> dans un format non anodin (et éventuellement qui alerte sur le caractère dangereux si l’on risque d’effacer beaucoup d’informations) ;
> plutôt en début de formulaire (surtout si le bouton sert essentiellement à revenir à l’étape précédente) ;
> associé à un message de confirmation si l’on risque d’effacer beaucoup de données ou des informations difficiles à saisir.”
amelie boucher a dit:
mince,
j’ai oublié mon exemple préféré (ou presque… c’est vraiment hyper courant), sur le site du loto, où on peut entrer tous ses numéros dans un formulaire (soit 60 petites cases si on a joué 10 grilles), pour faire calculer le montant de ses gains par le site :
http://www.fdjeux.com/jeux/loto/loto_s_combien.php (cliquer sur “simple”, sinon c’est moins horrible)
… sauf si on clique par mégarde sur “effacer”
joel ronez a dit:
Désolé, je trouve le bouton RESET très utile …. non je déconne
(tu aurais du fermer les commentaires)
Daoro a dit:
Le bouton reset… ah bon, des gens cliquent dessus ? o.O
Jeremie a dit:
Oui ! J’ai cliqué dessus mais ce n’était qu’un accident car ce maudit bouton était mal placé… Il était à la droite du bouton envoyer !
Cestuila a dit:
Mais, j’y pense… on pourrait aussi supprimer les boutons Preview/Prévisualiser?
Nan, mais c’est vrai, ça doit bien arriver que les gens cliquent dessus et ferment la fenêtre en croyant qu’ils ont bien cliqué sur “valider/envoyer”…
Cestuila a dit:
Ce qui est quand-même génial sur ton blog Fred, c’est que, même si “prévisualiser” est à gauche, en tapant la touche Tab une fois, on arrive directement à droite, sur “envoyer”, donc moins de risque de se tromper
Fred Cavazza a dit:
@ marti > En fait une interface riche n’a pas besoin d’être accessible. L’important est de proposer une alternative.
/Fred
Daniel a dit:
et pourquoi pas laisser le bouton “reset” mais le nommer “j’ai de la chance” ?
C’est pas plus utile mais ça ajoute une touche d’humour
Joachim a dit:
Et que dire des Français qui ont traduit “reset” par “annuler” ?
Alors que malgré son utilité douteuse, le bouton reset dispose en anglais d’un sens clair (remise à l’état initial), en français le “annuler” se rapproche plus des “undo” ou “cancel” anglais : annuler la modification en cours, retour à l’état précedent (et non pas initial)…
Je connais une boîte dans laquelle la MOA distingue les valeurs mémorisées de la saisie des valeurs par défaut (elle a bien compris le sens de reset). Nos inputs n’ont donc par 1 valeur, mais 1 valeur et 1 valeur par défaut. Ajoutez à ça que les développeurs voudraient distinguer les valeurs de session saisie, les valeurs par défaut mais aussi les valeur déjà en base dans le cas d’une saisie pour modification, et là vous obtenez un bordel que plus personne ne comprend. Faisons la peau à ce bouton (hohoho) !
Benjamin D.C. a dit:
» “En fait une interface riche n’a pas besoin d’être accessible. L’important est de proposer une alternative.”
Sauf ton respect, l’alternative ne devrait être considérée qu’en dernier recours. Il n’y a pas lieu de proposer des versions amoindries d’un outil si celui-ci peut être conçu de manière accessible dès le départ.
hadrien a dit:
tout à fait d’accord Fred, et d’ailleurs, pour éviter que n’importe qui fasse n’importe quoi, je compte supprimer aussi tous les submit de mes formulaires ainsi que les liens dans les pages.
à bon entendeur…
Guillaume a dit:
Pour éviter le principal désagrément du bouton reset (le clic accidentel), il suffit de placer un petit Javascript confirm() sur le onclick, tout simplement
Pierre a dit:
Benjamin D.C. :
Tout à fait, l’interface riche peut (et doit), dans beaucoup de cas, être simplement placée, de manière facultative, au-dessus des couches structure / présentation.
Il ne faut d’ailleurs pas perdre de vue que l’accessibilité est utile à tout le monde, y compris à ceux qui activent Javascript et n’ont aucun handicap physique.
Il ne faut pas négliger certains points dans la conception d’une interface riche, comme la navigation au clavier, l’utilisation des ancres dans l’URL lorsque le contenu est généré en AJAX, ou certaines règles d’ergonomie de base.
L’accessibilité, c’est pour moi “faciliter l’accès”, pour tout le monde.
Mogmog a dit:
Personnellement je suis Fred dans son combat contre les boutons RESET.
J’ai tout de même identifié 1 cas d’utilisation où le bouton RESET a une utilité : les formulaires où l’utilisateur est amené a ne faire QUE des modifications.
Par exemple vous passez une commande et le système vous propose de l’éditer quand bon vous semble. Lorsque vous l’éditez les valeurs par défauts ont une réelle signification et restaurer leur état initial peut être pertinent.
Bon j’avoue cet exemple est un peu tiré par les cheveux, un bouton “undo” permettant de revenir de façon incrémentale sur les modifications serait bien plus pertinente (voir un “reset” possible sur chaque champs individuellement).
Question bête : pourquoi les navigateurs ne prennent pas à leur charge ces fonctionnalités, plutôt que de coder du JS a gogo ?
Il faut aussi avoué que la gestion des formulaires est relativement pauvre sans recourir au script (gestion des patern etc …) bon c’est une autre histoire ou un autre débat
Julien de Prabère a dit:
Décidément, Fred n’a rien compris aux formulaires !
Il voudrait d’abord, nous faire remplir des cases vides… Pour ce faire, il faudrait cliquer, à coté de celles-ci, sur des étiquettes ? Il conviendrait ensuite, d’utiliser la méthode GET avec des adresses si longues qu’elles n’ont aucune chance de passer, puis, de généraliser les majuscules (ex : MARTIN à la 7ème étape !) comme sur feu l’annuaire des PTT ? Enfin, il voudrait interdire l’utilisation des resets !
La toile nous offre fort heureusement bien d’autres possibilités…
Alors prenons une form assez étroite pour que les inputs se superposent en une seule colonne et affectons leurs des valeurs par défaut : Votre nom, votre prénom… etc. Un onclick=”eff(this)” sera suffisant pour les effacer (avec la function eff(n){if (n.value==n.defaultValue) n.value=”;}). Ces valeurs par défaut pourront être utilisées lors du test pour vérifier que les champs obligatoires ont été au moins parcourus, mais surtout elles répparaîtront avec l’utilisation du fameux bouton reset alors bienvenu.
Plus besoin de labels, tabindex et autres complications inutiles. Un tel formulaire pourra être néanmoins servi à l’aide des tabulations et soumis avec la frappe de la touche Entrée (ici un onclick=”function(e){o=e?e.which:windows.event.keyCode;if (o!=13) return true;document.getElementById(’frm’).submit();}” sera nécessaire).
Indépendamment de bien d’autres recettes, les meilleurs cuisiniers de la toile imaginerons sans difficultés les traitements à faire subir aux entrées afin de classer ou retranscrire les noms et prénoms, dans les formes les mieux adaptées, et ceci quelles que soient leurs formes et particularités.
Fred Cavazza a dit:
Wow ! Alors là tu me la coupes Julien. Est-ce qu’il existe un formulaire en ligne qui fonctionne sur le principe que tu décris ?
/Fred
Julien de Prabère a dit:
Je ne sais pas, mais cela va sans doute venir… Un errata cependant, ce n’est pas un onclick mais un onkeypress qu’il convient de prévoir dans le script pour soumettre le questionnaire à l’aide du seul clavier !