Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
<input type="reset">
Baseline Widely available
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.
Exemple interactif
<form> <div> <label for="id">User ID:</label> <input type="text" name="id" /> <input type="reset" value="Reset" /> <input type="submit" value="Submit" /> </div></form>.controls { padding-top: 1rem; display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: 1fr 2fr; gap: 0.7rem;}label { font-size: 0.8rem; justify-self: end;}input[type="reset"],input[type="submit"] { width: 5rem; justify-self: end;}input[type="reset"] { grid-column: 2; grid-row: 2;}input[type="submit"] { grid-column: 2; grid-row: 3;}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.
Valeur
La valeur de l'attributvalue d'un élément<input type="reset"> contient une chaîne de caractères (DOMString) utilisée comme texte sur le bouton.
Exemple 1
<input type="reset" value="Réinitialiser le formulaire" />Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :
Exemple 2
<input type="reset" />Utiliser les boutons de réinitialisation
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<button> (voire un élément<input type="button">).
Un bouton simple
Commençons par créer un bouton de réinitialisation simple :
<form> <div> <label for="example">Voici un champ</label> <input type="text" /> </div> <div> <input type="reset" value="Réinitialiser le formulaire" /> </div></form>Voici le résultat obtenu :
Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation.
Ajouter un raccourci au bouton
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'attributaccesskey.
Dans cet exemple, on utilise la toucher (il faudra donc appuyer surr et d'autres touches propres au navigateur et au système d'exploitation, se référer àaccesskey pour le détails).
<form> <div> <label for="example">Saisir un peu de texte</label> <input type="text" /> </div> <div> <input type="reset" value="Réinitialiser le formulaire" accesskey="r" /> </div></form>Note :Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec ledesign du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.
Désactiver/Activer un bouton
Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attributdisabled sur l'élément :
<input type="reset" value="Désactivé" disabled />On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attributdisabled pour la passer detrue àfalse etvice versa (par exemple avec une instruction telle quebtn.disabled = true).
Note :Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page<input type="button">.
Note :À la différence des autres navigateurs,Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attributautocomplete peut être utilisé afin de contrôler cette fonctionnalité.
Validation
Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation.
Résumé technique
Spécifications
| Specification |
|---|
| HTML # reset-button-state-(type=reset) |
Compatibilité des navigateurs
Voir aussi
- L'élément
<input>et l'interfaceHTMLInputElement. - L'élément
<button> - Apprendre les formulaires et les boutons
- L'accessibilité et les formulaires
- Les formulaires HTML