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

03/04/2016

本文内容

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

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

先决条件

关于按钮和按钮事件

若要在 HTML 中创建按钮，需要向你的 HTML 中添加一个 button 元素。若要在 HTML 中设置按钮的内容，需要在打开和关闭 button 标记之间添加文本。button 可以包含不同类型的内容，如文本和图像。大多数按钮都只包含文本。

A 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 和一个输出图。

id="standardButton"

οnclick="ButtonExamples.standardButtonClicked(event)">Click me!

下面的示例定义 ButtonExamples.standardButtonClicked 事件处理程序并使它可以公开访问。当你单击该按钮时，本例将显示上例中定义的输出段落中的一些文本。

function standardButtonClicked(eventInfo) {

document.getElementById("outputParagraph").innerText = "Click!";

}

WinJS.Namespace.define("ButtonExamples",

{ standardButtonClicked : standardButtonClicked });

(也可以通过创建一个 input 元素并将其 type 属性设置为 "button" 来创建一个标准按钮。)

在窗体内添加一个标准按钮

在 form 内，没有任何属性的 button 元素充当提交按钮，但前提是该元素是窗体内的第一个按钮。如果你想要一个标准按钮，请将 button 元素的 type 属性设置为 "button"。

type="button"

οnclick="ButtonExamples.standardFormButtonClicked(event)">I'm a standard button!

function standardFormButtonClicked(eventInfo) {

document.getElementById("outputParagraph2").innerText = "Click!";

}

WinJS.Namespace.define("ButtonExamples",

{ standardFormButtonClicked: standardFormButtonClicked });

添加提交按钮

使用 form 中的提交按钮提交在窗体的控件中输入的数据。若要创建一个提交按钮，请添加一个 button 元素并将它的 type 属性设置为 "submit"。

οnsubmit="ButtonExamples.formSubmitted(event)">

Search

Clear

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

Search

Clear

请注意，你无需为该按钮创建事件处理程序：单击它会自动重置窗体。

(也可以通过创建一个 input 元素并将其 type 属性设置为 "reset" 来创建一个重置按钮。)

设置按钮样式

有关设置按钮样式的信息，请参阅如何设置按钮样式。

摘要

在本快速入门中，你学习了如何创建不同类型的 button 控件。