Démarrage rapide : ajout d’un bouton (HTML)
[ 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
À 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.