Schnellstart: Hinzufügen von Schaltflächen (HTML)

Artikel
03/04/2016

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]

Hier erfahren Sie, wie Sie verschiedene Typen von button erstellen.

Voraussetzungen

Schnellstart: Hinzufügen von HTML-Steuerelementen und Behandeln von Ereignissen

Informationen zu Schaltflächen und Schaltflächenereignissen

Fügen Sie zum Erstellen einer Schaltfläche in HTML ein button-Element zum HTML-Code hinzu. Um den Inhalt der Schaltfläche in HTML festzulegen, fügen Sie den Text zwischen dem öffnenden und schließenden button-Tag hinzu. Eine button kann verschiedene Arten von Inhalt, z. B. Text und Bilder, enthalten. Die meisten Schaltflächen enthalten nur Text.

<button>A button</button>

Generieren Sie zum Erstellen einer button in JavaScript ein neues button-Objekt, und fügen Sie es an das Dokumentobjektmodell (Document Objekt Model, DOM) an. Verwenden Sie zum Festlegen des Schaltflächentexts die innerHTML-Eigenschaft:

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

Es gibt drei Arten von Schaltflächen: die Standardschaltfläche, die Schaltfläche "Senden" und die Schaltfläche "Zurücksetzen". Legen Sie zum Angeben des gewünschten Schaltflächentyps für das type-Attribut "button", "submit" oder "reset" fest.

Der bevorzugte Weg der Benutzer für die Interaktion mit der Schaltfläche besteht im Klicken auf die Schaltfläche. Wenn Sie also eine Standardschaltfläche zur App hinzufügen, behandeln Sie ihr click-Ereignis. (Das click-Ereignis für die Schaltflächen "Senden" und "Zurücksetzen" muss nicht behandelt werden, da die Schaltflächen automatisch eine Aktion für das zugehörige form-Element ausführen.)

Bei der Behandlung des click-Ereignisses empfängt der Handler ein MouseEvent-Objekt, mit dem Sie die Koordinaten des Punkts, auf den geklickt wurde, die Schaltfläche des ausgelösten Ereignisses und mehr suchen können.

Das click-Ereignis kann für Maus-, Finger- und Stifteingaben verwendet werden. Eine vollständige Liste der unterstützten Schaltflächenereignisse finden Sie auf der button reference page.

Hinzufügen einer Standardschaltfläche

Verwenden Sie eine Standard-button zum Initiieren einer sofortigen Aktion.

Schaltflächen sollten nicht verwendet werden, um zu anderen Seiten zu navigieren. Links sind für diesen Zweck besser geeignet. Ausnahme: Für die Navigation in einem Assistenten können die Schaltflächen "Zurück" und "Weiter" verwendet werden. Andere Arten der Rückwärtsnavigation oder der Navigation zu einer übergeordneten Ebene sollten stattdessen eine Schaltfläche im win-backbutton-Format verwenden.

Fügen Sie zum Erstellen einer Standard-button lediglich ein button-Element zum Markup hinzu. Fügen Sie anschließend zwischen dem öffnenden und schließenden Tag des button-Steuerelements den Text ein, der auf der Schaltflächenoberseite angezeigt werden soll.

In diesem Beispiel werden eine Standard-button und ein Ausgabeabsatz erstellt.

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

Im nächsten Beispiel wird der ButtonExamples.standardButtonClicked-Ereignishandler definiert und öffentlich zugänglich gemacht. Beim Klicken auf die Schaltfläche wird in diesem Beispiel Text in dem im vorherigen Beispiel definierten Ausgabeabsatz angezeigt.

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

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

(Sie können eine Standardschaltfläche auch erstellen, indem Sie ein input-Element generieren und für sein type-Attribut "button" festlegen.)

Hinzufügen einer Standardschaltfläche in einem Formular

In einem form dient ein button-Element ohne Attribut als Schaltfläche zum Absenden, wenn es sich dabei um die erste Schaltfläche im Formular handelt. Wenn Sie eine Standardschaltfläche verwenden möchten, legen Sie für das type-Attribut des button-Elements "button" fest.

<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 });

Hinzufügen der Schaltfläche zum Senden

Verwenden Sie eine Schaltfläche zum Senden in einem form, um die in die Steuerelemente des Formulars eingegebenen Daten zu übermitteln. Fügen Sie zum Erstellen der Schaltfläche "Senden" ein button-Element hinzu, und legen Sie für das type-Attribut "submit" fest.

<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 });

Beachten Sie, dass Sie keinen Ereignishandler für die Schaltfläche erstellen müssen: Durch Klicken auf die Schaltfläche wird die Aktion des Formulars automatisch ausgelöst.

(Sie können die Schaltfläche "Senden" auch erstellen, indem Sie ein input-Element generieren und für sein type-Attribut "submit" festlegen.)

Hinzufügen einer Schaltfläche zum Zurücksetzen

Mit einer Schaltfläche zum Zurücksetzen werden die Eingabeelemente im Formular auf ihre ursprünglichen Werte zurückgesetzt. Fügen Sie zum Erstellen der Schaltfläche "Zurücksetzen" ein button-Element hinzu, und legen Sie für das type-Attribut "reset" fest.

<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>

Beachten Sie, dass Sie keinen Ereignishandler für die Schaltfläche erstellen müssen: Durch Klicken auf die Schaltfläche wird das Formular automatisch zurückgesetzt.

(Sie können die Schaltfläche "Zurücksetzen" auch erstellen, indem Sie ein input-Element generieren und für sein type-Attribut "reset" festlegen.)

Formatieren von Schaltflächen

Informationen zum Gestalten von Schaltflächen finden Sie unter So wird's gemacht: Gestalten von Schaltflächen.

Zusammenfassung

Sie haben in dieser Schnellstartanleitung erfahren, wie Sie verschiedene Arten von button-Steuerelementen erstellen.

Freigeben über