Démarrage rapide : ajout d’un bouton (HTML)

Article
03/04/2016

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Découvrez comment créer différents types de contrôles button.

Prérequis

Démarrage rapide : ajout de contrôles HTML et gestion des événements

À propos des boutons et des événements de bouton

Pour créer un bouton en HTML, vous ajoutez un élément button à votre code HTML. Pour définir le contenu du bouton en HTML, vous ajoutez le texte entre les balises d’ouverture et de fermeture de l’objet button. Un objet button peut contenir différents types de contenu, tels que du texte et des images. La plupart des boutons contiennent uniquement du texte.

<button>A button</button>

Pour créer un objet button en JavaScript, créez un nouvel objet button et attachez-le au modèle DOM (Document Object Model). Pour définir le texte du bouton, utilisez la propriété innerHTML.

var newButton = document.createElement("button");
newButton.innerHTML = "A button";
var buttonParent = document.getElementById("buttonParent");
buttonParent.appendChild(newButton);

Il existe trois types de bouton : le bouton standard, le bouton d’envoi et le bouton de réinitialisation. Pour spécifier le type de bouton souhaité, affectez à son attribut type la valeur "button", "submit" ou "reset".

Le principal moyen, pour les utilisateurs, d’interagir avec un bouton consiste à cliquer dessus. Par conséquent, lorsque vous ajoutez un bouton standard à votre application, gérez son événement click. (Il n’est pas nécessaire de gérer l’événement click pour les boutons d’envoi et de réinitialisation, car ils effectuent automatiquement une action pour l’élément form auquel ils appartiennent.)

Lorsque vous gérez l’événement click, votre gestionnaire reçoit un objet MouseEvent que vous pouvez utiliser pour trouver les coordonnés du point de clic, le bouton qui a déclenché l’événement, etc.

L’événement click fonctionne pour l’entrée de souris, l’entrée tactile et l’entrée de stylo/stylet. Pour obtenir la liste complète des événements de bouton, voir la button reference page.

Ajouter un bouton standard

Utilisez un objet button standard pour l’initialisation d’une action immédiate.

N’utilisez pas de bouton lorsque l’action consiste à accéder à une autre page ; dans ce cas, utilisez plutôt un lien. Exception : pour la navigation dans un Assistant, utilisez les boutons Précédent et Suivant. Pour les autres types de navigation vers l’arrière ou vers un niveau supérieur, utilisez un bouton de style win-backbutton.

Pour créer un objet button standard, il suffit d’ajouter un élément button à votre balisage. Ensuite, entre les balises d’ouverture et de fermeture du contrôle button, ajoutez le texte à faire apparaître sur le bouton.

Cet exemple crée un objet button standard et un paragraphe de sortie.

<button 
    id="standardButton" 
    onclick="ButtonExamples.standardButtonClicked(event)">Click me!</button>
<p id="outputParagraph"></p>

L’exemple suivant définit le gestionnaire d’événements ButtonExamples.standardButtonClicked et le rend accessible publiquement. Lorsque vous cliquez sur le bouton, cet exemple affiche du texte dans le paragraphe de sortie défini dans l’exemple précédent.

function standardButtonClicked(eventInfo) {
    document.getElementById("outputParagraph").innerText = "Click!"; 
}

WinJS.Namespace.define("ButtonExamples", 
{ standardButtonClicked : standardButtonClicked });

(Vous pouvez également créer un bouton standard en créant un élément input et en affectant à son attribut type la valeur "button".)

Ajouter un bouton standard à l’intérieur d’un formulaire

Dans un objet form, un élément button sans attribut agit comme un bouton d’envoi s’il s’agit du premier bouton à l’intérieur du formulaire. Si vous voulez un bouton standard, affectez à l’attribut type de l’élément button la valeur "button".

<form>
    <button 
        type="button"
        onclick="ButtonExamples.standardFormButtonClicked(event)">I'm a standard button!</button>
    <p id="outputParagraph2"></p>
</form>

function standardFormButtonClicked(eventInfo) {
    document.getElementById("outputParagraph2").innerText = "Click!";
}

WinJS.Namespace.define("ButtonExamples",
{ standardFormButtonClicked: standardFormButtonClicked });

Ajouter un bouton d’envoi

Utilisez un bouton d’envoi à l’intérieur d’un objet form pour envoyer les données entrées dans les contrôles du formulaire. Pour créer un bouton d’envoi, ajoutez un élément button et affectez à sa propriété type la valeur "submit".

<form action="https://www.bing.com" method="get"
    onsubmit="ButtonExamples.formSubmitted(event)">
    <input type="text" id="searchQuery" name="q" placeholder="Enter a search query." />
    <button type="submit">Search</button>
    <button type="reset">Clear</button>
</form> 
<p id="formOutput"></p>

function formSubmitted(eventInfo) {
    document.getElementById("formOutput").innerText =
        "You searched for " + document.getElementById("searchQuery").value;
}

WinJS.Namespace.define("ButtonExamples",
{ formSubmitted: formSubmitted });

Notez qu’il n’est pas nécessaire de créer un gestionnaire d’événements pour le bouton : le fait de cliquer dessus déclenche automatiquement l’action du formulaire.

(Vous pouvez également créer un bouton d’envoi en créant un élément input et en affectant à son attribut type la valeur "submit".)

Ajouter un bouton de réinitialisation

Un bouton de réinitialisation réinitialise les valeurs initiales des éléments d’entrée du formulaire. Pour créer un bouton de réinitialisation, ajoutez un élément button et affectez à sa propriété type la valeur "reset".

<form action="https://www.bing.com" method="get">
    <input type="text" id="searchQuery2" name="q" placeholder="Enter a search query." />
    <button type="submit">Search</button>
    <button type="reset">Clear</button>
</form>

Notez qu’il n’est pas nécessaire de créer un gestionnaire d’événements pour le bouton : le fait de cliquer dessus réinitialise automatiquement le formulaire.

(Vous pouvez également créer un bouton de réinitialisation en créant un élément input et en affectant à son attribut type la valeur "reset".)

Application de styles à des boutons

Pour plus d’informations sur l’application de styles à des boutons, voir Comment appliquer un style à des boutons.

Récapitulatif

Dans ce guide de démarrage rapide, vous avez appris à créer différents types de contrôles button.

Share via