<input type="reset">

Baseline Large disponibilité

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 class="controls">
    <label for="id">Identifiant&nbsp;:</label>
    <input type="text" id="id" name="id" />

    <input type="reset" value="Réinitialiser" />
    <input type="submit" value="Envoyer" />
  </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 (souvent en essayant de cliquer sur le bouton d'envoi).

Valeur

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.

Définir l'attribut `value`

html

<input type="reset" value="Réinitialiser le formulaire" />

Omettre l'attribut `value`

html

<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 <input type="button">, ou mieux encore, un élément <button>.

Un bouton simple de réinitialisation

Commençons par créer un bouton de réinitialisation simple :

html

<form>
  <div>
    <label for="example">Écrivez un texte pour essayer</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).

html

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

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é.

Désactiver/Activer un bouton

Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut disabled sur l'élément :

html

<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 ; 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">.

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`