Quickstart: Adding a button (HTML)

Article
08/10/2016

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Learn how to create different types of button controls.

Prerequisites

Quickstart: Adding HTML controls and handling events

About buttons and button events

To create a button in HTML, you add a button element to your HTML. To set the button's content in HTML, you add the text between the opening and closing button tags. A button can contain different types of content, such as text and images. Most buttons contain only text.

<button>A button</button>

To create a button in JavaScript, create a new button object and attach it to the Document Object Model (DOM). To set the button text, use the innerHTML property.

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

There are three types of buttons: the standard button, the submit button, and the reset button. To specify the type of button you want, set its type attribute to "button", "submit", or "reset".

The primary way for users to interact with a button is to click it, so, when you add a standard button to your app, handle its click event. (You don't need to handle the click event for submit and reset buttons, because they automatically perform an action for the form element they belong to.)

When you handle the click event, your handler receives a MouseEvent object that you can use to find the coordinates of the click point, the button that triggered the event, and more.

The click event works for mouse, touch, and pen/stylus input. For a complete list of all button events, see the button reference page.

Add a standard button

Use a standard button for initiating an immediate action.

Don't use a button when the action is to go to another page; use a link instead. Exception: for wizard navigation, use buttons labeled "Back" and "Next". For other types of backward navigation or navigation to an upper level, use a button with the win-backbutton style.

To create a standard button, just add a button element to your markup. Then, between the button control's opening and closing tags,add the text you want to appear on the button's face.

This example creates a standard button and an output paragraph.

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

The next example defines the ButtonExamples.standardButtonClicked event handler and makes it publicly accessible. When you click the button, this example displays some text in the output paragraph defined in the previous example.

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

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

(You can also create a standard button by creating an input element and setting its type attribute to "button".)

Add a standard button inside a form

Inside a form, a button element without any attribute acts as submit button if it is the first button inside the form. If you want a standard button, set the button element's type attribute to "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 });

Add a submit button

Use a submit button inside a form to submit the data entered in the form's controls. To create a submit button, add a button element and set its type attribute to "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 });

Note that you don't need to create an event handler for the button: clicking it automatically triggers the form's action.

(You can also create a submit button by creating an input element and setting its type attribute to "submit".)

Add a reset button

A reset button resets the input elements in the form to their initial values. To create a reset button, add a button element and set its type attribute to "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>

Note that you don't need to create an event handler for the button: clicking it automatically resets the form.

(You can also create a reset button by creating an input element and setting its type attribute to "reset".)

Styling buttons

For info about styling buttons, see How to style buttons.

Summary

In this quickstart, you learned how to create different types of button controls.

Share via