<input type="reset">

Les éléments <input> de type "reset" sont affichés sous la forme de boutons permettant de réiniatiliser 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.

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
Méthodes Aucune

Valeur

La valeur de l'attribut value d'un élément <input type="reset"> contient une chaîne de caractères (DOMString) utilisée comme texte sur le bouton.

<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 » :

<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 id="example" 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'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).

<form>
  <div>
    <label for="example">Saisir un peu de texte</label>
    <input id="example" 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 le design 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'attribut disabled 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'attribut disabled pour la passer de true à false et vice versa (par exemple avec une instruction telle que btn.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'attribut autocomplete 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.

Spécifications

Spécification État
HTML Living Standard
La définition de '<input type="reset">' dans cette spécification.
Standard évolutif
HTML5
La définition de '<input type="reset">' dans cette spécification.
Recommendation

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge ? Firefox Support complet 1
Notes
Support complet 1
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a &ltbutton&gt across page loads. Use the autocomplete attribute to control this feature.
IE Support complet OuiOpera Support complet OuiSafari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile ? Firefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a &ltbutton&gt across page loads. Use the autocomplete attribute to control this feature.
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,