Guia de início rápido: adicionando um botão (HTML)

Artigo
03/04/2016

[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]

Saiba como criar diferentes tipos de controles de button.

Pré-requisitos

Guia de início rápido: adicionando controles HTML e manipulando eventos

Sobre botões e eventos de botão

Para criar um botão em HTML, adicione um elemento button ao HTML. Para definir o conteúdo do botão no HTML, adicione o texto entre as marcas de abertura e fechamento do button Um button pode conter diferentes tipos de conteúdo, como texto e imagens. A maioria dos botões só contém texto.

<button>A button</button>

Para criar um button em JavaScript, crie um novo objeto button e anexe-o ao DOM. Para definir o texto do botão, use a propriedade innerHTML.

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

Existem três tipos de botões: o botão padrão, o botão de envio e o botão de redefinição. Para especificar o tipo de botão que você deseja, defina o atributo type como "botão", "enviar" ou "redefinir".

A forma mais fácil de interação dos usuários com um botão é clicar nele. Assim, quando você adicionar um botão padrão ao seu aplicativo, manipule o evento click. (Não é preciso manipular o evento click para botões de envio ou redefinição, pois eles executam automaticamente uma ação para o elemento form ao qual pertencem.)

Quando você manipula o evento click, seu manipulador recebe um objeto MouseEvent que pode ser usado para encontrar as coordenadas do ponto de clique, o botão que disparou o evento e muito mais.

O evento click funciona com mouse, toque e entrada de caneta. Para obter uma lista completa de todos os eventos de botão, veja button reference page.

Adicionar um botão padrão

Use um button padrão para iniciar uma ação imediata.

Não use um botão quando a ação for navegar para outra página; em vez disso, use um link. Exceção: para navegação no assistente, use os botões "Voltar" e "Avançar". Para outros tipos de navegação para trás ou navegação para um nível superior, use um botão com o estilo win-backbutton.

Para criar um button padrão, basta adicionar um elemento button à sua marcação. Depois, entre as marcas de abertura e fechamento do controle button, adicione o texto que você quer que apareça na face do botão.

Este exemplo cria um button padrão e um parágrafo de saída.

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

O próximo exemplo define o manipulador de eventos ButtonExamples.standardButtonClicked e o torna publicamente acessível. Quando você clica no botão, este exemplo exibe algum texto no parágrafo de saída definido no exemplo anterior.

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

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

(Também é possível criar um botão padrão criando um elemento input e definindo o atributo type como "botão".)

Adicionar um botão padrão a um formulário

Em um form, um elemento button sem nenhum atributo atua como botão de envio caso ele seja o primeiro botão dentro do formulário. Se você deseja um botão padrão, defina o atributo type do elemento button como "botão".

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

Adicionar um botão de envio

Use um botão de envio dentro de um form para enviar os dados inseridos nos controles do formulário. Para criar um botão de envio, adicione um elemento button e defina o atributo type como "enviar".

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

Observe que não é preciso criar um manipulador de eventos para o botão: clicar nele dispara automaticamente a ação do formulário.

(Também é possível criar um botão de envio criando um elemento input e definindo o atributo type como "enviar".)

Adicionar um botão de redefinição

Um botão de redefinição redefine os elementos de entrada no formulário para os valores iniciais. Para criar um botão de redefinição, adicione um elemento button e defina o atributo type como "redefinir".

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

Observe que não é preciso criar um manipulador de eventos para o botão: clicar nele redefine automaticamente o formulário.

(Também é possível criar um botão de redefinição criando um elemento input e definindo o atributo type como "redefinir".)

Definindo o estilo de botões

Para saber sobre como definir o estilo de botões, veja Como definir o estilo de botões.

Resumo

Neste guia de início rápido, você aprendeu a criar diferentes tipos de controles de button.

Compartilhar via