Get to know MDN better
Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
Les éléments <input> de type "reset" sont affichés sous la forme de boutons permettant de réinitialiser l'ensemble des champs du formulaire avec leurs valeurs initiales.
Note : Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement (souvent en essayant de cliquer sur le bouton d'envoi).
Un élément <input type="reset"> possède un attribut value qui contient une chaîne de caractères utilisée comme étiquette du bouton, fournissant ainsi une description accessible. Les boutons tels que reset n'ont pas de valeur autrement.
Les boutons <input type="reset"> sont utilisés pour réinitialiser les formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement grâce à JavaScript, il est préférable d'utiliser un élément <input type="button">, ou mieux encore, un élément <button>.
Commençons par créer un bouton de réinitialisation simple :
Voici le résultat obtenu :
Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation.
Les raccourcis claviers permettent de déclencher un bouton grâce à une touche ou à une combinaison de touches sur le clavier. Pour ajouter un raccourci clavier à un bouton de réinitialisation, il suffit d'utiliser l'attribut accesskey.
Dans cet exemple, on utilise la touche r (il faudra donc appuyer sur r et d'autres touches propres au navigateur et au système d'exploitation, se référer à accesskey pour le détails).
Le problème avec l'exemple ci-dessus est qu'il n'y a aucun moyen pour l'utilisateur·ice de savoir quelle est la touche d'accès rapide ! Cela est particulièrement vrai puisque les modificateurs sont généralement non standard pour éviter les conflits. Lors de la création d'un site, assurez-vous de fournir cette information d'une manière qui n'interfère pas avec le design du site (par exemple en fournissant un lien facilement accessible qui pointe vers des informations sur les touches d'accès rapide du site). Ajouter une info-bulle au bouton (en utilisant l'attribut title) peut également aider, bien que ce ne soit pas une solution complète pour l'accessibilité.
Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut disabled sur l'élément :
On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut disabled pour la passer de true à false et vice versa ; en JavaScript, cela ressemble à btn.disabled = true ou btn.disabled = false.
Note : Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <input type="button">.
Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation.
Nous avons inclus des exemples de base ci-dessus. Il n'y a vraiment rien de plus à dire sur les boutons de réinitialisation.
| Valeur | Une chaîne de caractères qui est utilisée comme intitulé pour le bouton. |
| Évènements | click |
| Attributs pris en charge | type et value |
| Attributs IDL | value |
| Interface DOM | HTMLInputElement |
| Méthodes | Aucune |
| Rôle ARIA implicite | button |
| HTML # reset-button-state-(type=reset) |
Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.
Cette page a été modifiée le 22 avr. 2026 par les contributeur·ice·s du MDN.
Votre modèle pour un internet meilleur.
Visitez la société mère à but non lucratif de Mozilla Corporation, la Fondation Mozilla.
Certaines parties de ce contenu sont protégées par le droit d'auteur ©1998—2026 des contributeurs individuels de mozilla.org. Contenu disponible sous une licence Creative Commons.