快速入門：新增按鈕 (HTML)

發行項
03/04/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

了解如何建立不同類型的 button 控制項。

先決條件

快速入門：新增 HTML 控制項和處理事件

關於按鈕和按鈕事件

若要以 HTML 建立按鈕，您可將 button 元素新增至您的 HTML 中。若要以 HTML 設定按鈕的內容，您可在開頭和結束 button 標記間新增文字。button 可包含不同類型的內容，例如文字和影像。大部分的按鈕僅包含文字。

<button>A button</button>

若要以 JavaScript 建立 button，請建立一個新的 button 物件並將該物件附加至文件物件模型 (DOM)。若要設定按鈕文字，請使用 innerHTML 屬性。

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

按鈕有三種類型：標準按鈕、提交按鈕和重設按鈕。若要指定您要的按鈕類型，請將其 type 屬性設為 "button"、"submit" 或 "reset"。

使用者與按鈕互動的主要方式是按一下按鈕，因此當您將標準按鈕新增至應用程式時，會處理按鈕的 click 事件 (您不需要處理提交和重設按鈕的 click 事件，因為它們會自動執行所屬 form 元素的動作)。

當您處理 click 事件時，您的處理常式會收到 MouseEvent 物件，您可用來尋找按一下之處、觸發事件的按鈕等的座標。

click 事件適用於滑鼠、觸控和畫筆/手寫筆輸入。如需所有按鈕事件的完整清單，請參閱 button reference page。

新增標準按鈕

使用標準 button 以便起始立即動作。

如果動作是要前往到另一個頁面，請不要使用按鈕，改用連結。例外狀況：如果是精靈瀏覽，請使用標籤為 [上一步] 和 [下一步] 的按鈕。如果是其他類型的反向瀏覽或瀏覽到上層，請使用 win-backbutton 樣式的按鈕。

若要建立標準 button，只要將 button 元素新增至您的標記中。然後，在 button 控制項之間開啟和關閉標記，新增要在按鈕表面顯示的文字。

這個範例會建立標準 button 以及輸出段落。

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

下一個範例會定義 ButtonExamples.standardButtonClicked 事件處理常式，並讓該處理常式可供公開存取。當您按一下按鈕時，這個範例會在之前範例中定義的輸出段落中顯示一些文字

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

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

(您也可以建立 input 元素並將它的 type 屬性設為 "button" 來建立標準按鈕)。

在表單內新增標準按鈕

在 form 內，如果沒有任何屬性的 button 元素是表單內的第一個按鈕，則會做為提交按鈕。如果您需要標準按鈕，請將 button 元素的 type 屬性設為 "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 });

新增提交按鈕

在 form 內使用提交按鈕來提交在表單控制項中輸入的資料。若要建立提交按鈕，請新增 button 元素，並將其 type 屬性設為 "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 });

請注意，您不需要為按鈕建立事件處理常式：按一下按鈕會自動觸發表單的動作

(您也可以建立 input 元素並將其 type 屬性設為 "submit" 來建立提交按鈕)。

新增重設按鈕

重設按鈕會將表單內的輸入元素重設為初始值。若要建立重設按鈕，請新增 button 元素，並將其 type 屬性設為 "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>

請注意，您不需要為按鈕建立事件處理常式：按一下按鈕會自動重設表單

(您也可以建立 input 元素並將其 type 屬性設為 "reset" 來建立重設按鈕)。

設定按鈕的樣式

如需有關設定按鈕樣式的詳細資訊，請參閱如何設定按鈕的樣式。

摘要

在這個快速入門中，您已學會如何建立不同類型的 button 控制項。