<input type ="button"> - HTML (HyperText Markup Language)

Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez également contribuer en rejoignant la communauté francophone sur MDN Web Docs.

`Exemple 2`

Si on n'indique aucune valeur, le bouton sera vide :

html

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

`Un bouton simple`

Dans cet exemple, commençons par créer un bouton simple avec un gestionnaire d'évènement permettant de déclencher une action au clic afin de démarrer cette machine (enfin, pour être plus précis : on échangera la valeur de l'attribut value du bouton et le texte situé dans le paragraphe qui suit) :

html La machine est arrêtée. js var btn = document.querySelector("input"); var txt = document.querySelector("p"); btn.addEventListener("click", updateBtn); function updateBtn() { if (btn.value === "Démarrer la machine") { btn.value = "Arrêter la machine"; txt.textContent = "La machine est démarrée !"; } else { btn.value = "Démarrer la machine"; txt.textContent = "La machine est arrêtée."; } } Dans ce script, on récupère une référence à l'objet HTMLInputElement qui représente l'élément du DOM et on stocke cette référence dans la variable btn. addEventListener() pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement click se produira sur le bouton.

`Ajouter des raccourcis clavier`

Les raccourcis clavier permettent à un utilisateur 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 universel accesskey (qu'on peut d'ailleurs utiliser pour les autres éléments ).

Dans l'exemple qui suit, on définit s comme raccourci (autrement dit, il faudra appuyer sur la touche s 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 La machine est arrêtée. var btn = document.querySelector("input"); var txt = document.querySelector("p"); btn.addEventListener("click", updateBtn); function updateBtn() { if (btn.value === "Démarrer la machine") { btn.value = "Arrêter la machine"; txt.textContent = "La machine est démarrée !"; } else { btn.value = "Démarrer la machine"; txt.textContent = "La machine est arrêtée."; } } Note : Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.

`Désactiver et activer un bouton`

Pour désactiver un bouton, il suffit d'ajouter l'attribut universel disabled :

html Il est possible d'activer ou de désactiver des boutons lors de l'utilisation de la page en modifiant l'attribut disabled de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code btn.disabled = true). La fonction setTimeout() est ensuite utilisée afin de réinitialiser le bouton après deux secondes. Exemple 1 var btn = document.querySelector("input"); btn.addEventListener("click", disableBtn); function disableBtn() { btn.disabled = true; btn.value = "Désactivé"; window.setTimeout(function () { btn.disabled = false; btn.value = "Activé"; }, 2000); } Si l'attribut disabled n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément ) et en indiquant disabled sur le conteneur. C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut disabled est activé sur l'élément lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes. Exemple 2 Groupe de boutons var btn = document.querySelector("input"); var fieldset = document.querySelector("fieldset"); btn.addEventListener("click", disableBtn); function disableBtn() { fieldset.disabled = true; window.setTimeout(function () { fieldset.disabled = false; }, 2000); } 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`

Les éléments 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 , 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 30 body { margin: 0; overflow: hidden; background: #ccc; } .toolbar { width: 150px; height: 75px; background: #ccc; 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; } js var canvas = document.querySelector(".myCanvas"); var width = (canvas.width = window.innerWidth); var height = (canvas.height = window.innerHeight - 85); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(0,0,0)"; ctx.fillRect(0, 0, width, height); var colorPicker = document.querySelector('input[type="color"]'); var sizePicker = document.querySelector('input[type="range"]'); var output = document.querySelector(".output"); var clearBtn = document.querySelector('input[type="button"]'); // On convertit des degrés en radians function degToRad(degrees) { return (degrees * Math.PI) / 180; } // On met à jour la valeur pour le sélecteur // de taille sizePicker.oninput = function () { output.textContent = sizePicker.value; }; // On enregistre les coordonnées du pointeur de la souris // emouse pointer coordinates, and whether the button is pressed var curX; var curY; var pressed = false; // On met à jour les coordonnées du pointeur document.onmousemove = function (e) { curX = window.Event ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); curY = window.Event ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); }; canvas.onmousedown = function () { pressed = true; }; canvas.onmouseup = function () { pressed = false; }; clearBtn.onclick = function () { 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	A `DOMString` used as the button's label
Évènements	`click`
Attributs pris en charge	`type` et `value`
Attributs IDL	`value`
Méthodes	Aucune

`Spécifications`

Specification
HTML # button-state-(type=button)

`Compatibilité des navigateurs`

Voir aussi L'élément L'interface DOM HTMLInputElement implémentée par l'élément L'élément Help improve MDN Was this page helpful to you? Learn how to contribute.This page was last modified on 1 janv. 1970 by MDN contributors. View this page on GitHub • Report a problem with this content