<input type="button">

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 typebutton sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènementclick).

Exemple interactif

<input type="button" value="Ajouter aux favoris" />

.styled {  border: 0;  line-height: 2.5;  padding: 0 20px;  font-size: 1rem;  text-align: center;  color: white;  text-shadow: 1px 1px 1px black;  border-radius: 10px;  background-color: tomato;  background-image: linear-gradient(    to top left,    rgb(0 0 0 / 20%),    rgb(0 0 0 / 20%) 30%,    transparent  );  box-shadow:    inset 2px 2px 3px rgb(255 255 255 / 60%),    inset -2px -2px 3px rgb(0 0 0 / 60%);}.styled:hover {  background-color: red;}.styled:active {  box-shadow:    inset -2px -2px 3px rgb(255 255 255 / 60%),    inset 2px 2px 3px rgb(0 0 0 / 60%);}

Note :Bien que les éléments<input> de type"button" représentent toujours des éléments HTML valides, l'élément<button>, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.

Valeur

Bouton avec une valeur

L'attributvalue d'un élément<input type="button"> contient une chaîne de caractères utilisée comme étiquette du bouton. Lavalue fournit ladescription accessible pour le bouton.

html

<input type="button" value="Bouton cliquer" />

Bouton sans valeur

Si vous ne définissez pas devalue, vous obtenez un bouton vide :

html

<input type="button" />

Utiliser les boutons

Les éléments<input type="button"> ne possèdent pas de comportement particulier (leurs analogues<input type="submit"> et<input type="reset"> permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton<input type="button"> puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript.

Un bouton simple

Nous allons commencer par créer un bouton simple avec un gestionnaire d'évènementclick qui démarre notre machine (en fait, il échange lavalue du bouton et le contenu texte du paragraphe qui suit) :

html

<form>  <input type="button" value="Démarrer la machine" /></form><p>La machine est arrêtée.</p>

const button = document.querySelector("input");const paragraph = document.querySelector("p");button.addEventListener("click", updateButton);function updateButton() {  if (button.value === "Démarrer la machine") {    button.value = "Arrêter la machine";    paragraph.textContent = "La machine est démarrée !";  } else {    button.value = "Démarrer la machine";    paragraph.textContent = "La machine est arrêtée.";  }}

Dans ce script, on récupère une référence à l'objetHTMLInputElement qui représente l'élément<input> du DOM et on stocke cette référence dans la variablebtn.addEventListener() pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènementclick se produira sur le bouton.

Ajouter des raccourcis clavier

Les raccourcis clavier permettent à un·e utilisateur·ice de déclencher une action grâce à une touche ou grâce à une combinaison de touches du clavier. Pour ajouter un raccourci clavier déclenchant le bouton, on pourra ajouter l'attribut universelaccesskey (qu'on peut d'ailleurs utiliser pour les autres éléments<input>).

Dans l'exemple qui suit, on définits comme raccourci (autrement dit, il faudra appuyer sur la touches avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf.accesskey pour la liste de ces touches).

html

<form>  <input type="button" value="Démarrer la machine" accesskey="s" /></form><p>La machine est arrêtée.</p>

const button = document.querySelector("input");const paragraph = document.querySelector("p");button.addEventListener("click", updateButton);function updateButton() {  if (button.value === "Démarrer la machine") {    button.value = "Arrêter la machine";    paragraph.textContent = "La machine est démarrée !";  } else {    button.value = "Démarrer la machine";    paragraph.textContent = "La machine est arrêtée.";  }}

Note :Un problème de cet exemple est que l'utilisateur·ice ne saura pas quelle touche utiliser comme raccourci ! Sur un site réel, il faudrait fournir cette information d'une manière qui n'interfère pas avec la présentation du site (par exemple en fournissant un lien facilement accessible qui pointe vers une page listant les raccourcis du site).

Désactiver et activer un bouton

Pour désactiver un bouton, définissez l'attribut universeldisabled sur celui-ci, comme ceci :

html

<input type="button" value="Je suis désactivé" disabled />

Définir l'attribut`disabled`

Vous pouvez activer et désactiver des boutons à l'exécution en définissantdisabled àtrue oufalse. Dans cet exemple, notre bouton commence activé, mais si vous appuyez dessus, il est désactivé avecbutton.disabled = true. Une fonctionsetTimeout() est ensuite utilisée pour réactiver le bouton après deux secondes.

html

<input type="button" value="Activé" />

const button = document.querySelector("input");button.addEventListener("click", disableButton);function disableButton() {  button.disabled = true;  button.value = "Désactivé";  setTimeout(() => {    button.disabled = false;    button.value = "Activé";  }, 2000);}

Héritage de l'état désactivé

Si l'attributdisabled n'est pas fourni, le bouton hérite de l'étatdisabled de son élément parent. De cette façon, on peut activer ou désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément<fieldset>) et en indiquantdisabled sur le conteneur.

L'exemple ci-dessous montre ce comportement. Il est très similaire à l'exemple précédent, sauf que l'attributdisabled est défini sur le<fieldset> lorsque le premier bouton est pressé — cela désactive les trois boutons jusqu'à la fin du délai de deux secondes.

<fieldset>  <legend>Groupe de boutons</legend>  <input type="button" value="Bouton 1" />  <input type="button" value="Bouton 2" />  <input type="button" value="Bouton 3" /></fieldset>

const button = document.querySelector("input");const fieldset = document.querySelector("fieldset");button.addEventListener("click", disableButton);function disableButton() {  fieldset.disabled = true;  setTimeout(() => {    fieldset.disabled = false;  }, 2000);}

Note :À la différence des autres navigateurs, Firefox conserve l'étatdisabled d'un élément<input> même après le rechargement de la page. Pour contourner ce comportement, définissez l'attributautocomplete de l'élément<input> àoff. (VoirFirefox boggue 654072^(angl.) pour plus de détails.)

Validation

Les éléments<input type="button"> n'ont pas de contrainte de validation.

Exemples

Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément<canvas>, une courte feuille de style CSS (masquée) et du code JavaScript. Les deux contrôles situés en haut permettent de choisir la couleur et la taille de la pointe du crayon. Le bouton quant à lui permet de réinitialiser le canevas.

html

<div>  <input type="color" aria-label="Sélectionner la couleur du crayon" />  <input    type="range"    min="2"    max="50"    value="30"    aria-label="Sélectionner la taille de la pointe du crayon" /><span       >30</span  >  <input type="button" value="Réinitialiser le canevas" /></div><canvas>  <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p></canvas>

body {  background: #cccccc;  margin: 0;  overflow: hidden;}.toolbar {  background: #cccccc;  width: 150px;  height: 75px;  padding: 5px;}input[type="color"],input[type="button"] {  width: 90%;  margin: 0 auto;  display: block;}input[type="range"] {  width: 70%;}span {  position: relative;  bottom: 5px;}

const canvas = document.querySelector(".myCanvas");const width = (canvas.width = window.innerWidth);const height = (canvas.height = window.innerHeight - 85);const ctx = canvas.getContext("2d");ctx.fillStyle = "rgb(0 0 0)";ctx.fillRect(0, 0, width, height);const colorPicker = document.querySelector('input[type="color"]');const sizePicker = document.querySelector('input[type="range"]');const output = document.querySelector(".output");const clearBtn = document.querySelector('input[type="button"]');// On convertit des degrés en radiansfunction degToRad(degrees) {  return (degrees * Math.PI) / 180;}// On met à jour la valeur pour le sélecteur// de taillesizePicker.oninput = () => {  output.textContent = sizePicker.value;};// On enregistre les coordonnées du pointeur de la souris// emouse pointer coordinates, and whether the button is pressedlet curX;let curY;let pressed = false;// On met à jour les coordonnées du pointeurdocument.onmousemove = (e) => {  curX = e.pageX;  curY = e.pageY;};canvas.onmousedown = () => {  pressed = true;};canvas.onmouseup = () => {  pressed = false;};clearBtn.onclick = () => {  ctx.fillStyle = "rgb(0 0 0)";  ctx.fillRect(0, 0, width, height);};function draw() {  if (pressed) {    ctx.fillStyle = colorPicker.value;    ctx.beginPath();    ctx.arc(      curX,      curY - 85,      sizePicker.value,      degToRad(0),      degToRad(360),      false,    );    ctx.fill();  }  requestAnimationFrame(draw);}draw();

Résumé technique

Valeur	Une chaîne de caractères utilisée comme étiquette du 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`