diff options
Diffstat (limited to 'files/fr/web/html/element/input/button/index.html')
| -rw-r--r-- | files/fr/web/html/element/input/button/index.html | 348 |
1 files changed, 348 insertions, 0 deletions
diff --git a/files/fr/web/html/element/input/button/index.html b/files/fr/web/html/element/input/button/index.html new file mode 100644 index 0000000000..da1c6786e2 --- /dev/null +++ b/files/fr/web/html/element/input/button/index.html @@ -0,0 +1,348 @@ +--- +title: <input type ="button"> +slug: Web/HTML/Element/Input/button +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} de type <strong><code>button</code></strong> 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ènement {{event("click")}}).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<div class="note"> +<p><strong>Note </strong>: Bien que les éléments <code><input></code> de type <code>"button"</code> représentent toujours des éléments HTML valides, l'élément {{HTMLElement("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.</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>L'attribut {{htmlattrxref("value", "input")}} d'un t'el élément contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton (autrement dit, comme texte affiché sur le bouton).</p> + +<div id="summary-example3"> +<pre class="brush: html"><input type="button" value="Bouton cliquer"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>Si on n'indique aucune valeur, le bouton sera vide :</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Utiliser_les_boutons_<input>">Utiliser les boutons <code><input></code></h2> + +<p>Les éléments <code><input type="button"></code> ne possèdent pas de comportement particulier (leurs analogues <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton <code><input type="button"></code> puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript.</p> + +<h3 id="Un_bouton_simple">Un bouton simple</h3> + +<p>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 <code>value</code> du bouton et le texte situé dans le paragraphe qui suit) :</p> + +<pre class="brush: html"><form> + <input type="button" value="Démarrer la machine"> +</form> +<p>La machine est arrêtée.</p></pre> + +<pre class="brush: 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.'; + } +}</pre> + +<p>Dans ce script, on récupère une référence à l'objet {{domxref("HTMLInputElement")}} qui représente l'élément <code><input></code> du DOM et on stocke cette référence dans la variable <code>btn</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement {{event("click")}} se produira sur le bouton.</p> + +<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p> + +<h3 id="Ajouter_des_raccourcis_clavier">Ajouter des raccourcis clavier</h3> + +<p>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 <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> (qu'on peut d'ailleurs utiliser pour les autres éléments {{HTMLElement("input")}}).</p> + +<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> pour la liste de ces touches).</p> + +<div id="accesskey-example1"> +<pre class="brush: html"><form> + <input type="button" value="Démarrer la machine" accesskey="s"> +</form> +<p>La machine est arrêtée.</p> +</pre> +</div> + +<div class="hidden"> +<pre class="brush: 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.'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}</p> + +<div class="note"> +<p><strong>Note </strong>: 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.</p> +</div> + +<h3 id="Désactiver_et_activer_un_bouton">Désactiver et activer un bouton</h3> + +<p>Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="button" value="Je suis désactivé" disabled></pre> +</div> + +<p>Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut <code>disabled</code> 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 <code>btn.disabled = true</code>). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes.</p> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html"><input type="button" value="Activé"></pre> + +<pre class="brush: js">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); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<p>Si l'attribut <code>disabled</code> 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 {{HTMLElement("fieldset")}}) et en indiquant <code>disabled</code> sur le conteneur.</p> + +<p>C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut <code>disabled</code> est activé sur l'élément <code><fieldset></code> lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes.</p> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html"><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></pre> + +<pre class="brush: js">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); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<div class="note"> +<p><strong>Note </strong>: À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Les éléments <code><input</code><code> type="button"</code><code>></code> n'ont pas de contrainte de validation.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément {{htmlelement("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.</p> + +<pre class="brush: html"><div class="toolbar"> + <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 class="output">30</span> + <input type="button" value="Réinitialiser le canevas"> +</div> + +<canvas class="myCanvas"> + <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css">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; + }</pre> +</div> + +<pre class="brush: 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();</pre> + +<p>{{EmbedLiveSample("Exemples", '100%', 600)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>A {{domxref("DOMString")}} used as the button's label</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en Supported common attributes</strong></td> + <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>L'élément {{HTMLElement("input")}}</li> + <li>L'interface DOM {{domxref("HTMLInputElement")}} implémentée par l'élément</li> + <li>L'élément {{HTMLElement("button")}}, plus moderne</li> +</ul> |