快速入门：添加按钮 (HTML)

  • 项目

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]

了解如何创建不同类型的 button控件。

先决条件

关于按钮和按钮事件

若要在 HTML 中创建按钮，需要向你的 HTML 中添加一个 button 元素。若要在 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 控件。