HTML Button: aprenda como aplicar a tag button em páginas e formulários

<button>

A tag <button> é um elemento HTML representado visualmente por um botão clicável. É um elemento muito útil em formulários ou em qualquer parte de uma página web.

Como utilizar a tag <button>?

A tag <button> é utilizada para inserir interatividade em uma página ou formulário e tem como função executar uma determinada ação ao receber um clique do usuário.

Por padrão, sua aparência é semelhante a um botão retangular. Entretanto, ela pode ser alterada por meio de estilos CSS ou também substituída por imagem e textos.

<button>: na prática

  <form>
    <input type='text' placeholder='Digite o seu nome'/>
    <button type='submit'>Enviar</button>
  </form>
  

Sintaxe

<button> Nome apresentado no botão…</button>

Atributos

autofocus

Esse atributo especifica que um botão deve obter foco automático quando a página for carregada.

disable

Esse atributo especifica que um botão será desabilitado, ou seja, o usuário não poderá interagir com o botão.

form

Esse atributo especifica a qual formulário o botão pertence.

formaction

Esse atributo especifica para onde enviar os dados do formulário quando este é submetido pelo botão.

formenctype

Esse atributo especifica como os dados de um formulário devem ser codificados antes de enviá-los para um servidor. Seus possíveis valores são:

• application/x-www-form-urlencoded: Valor padrão se o atributo não for especificado;
• multipart/form-data: Este valor é necessário se o usuário fizer upload de um arquivo através do formulário;
• text/plain: Envia os dados sem qualquer codificação (Não recomendado).

formmethod

Esse atributo especifica o método HTTP que o navegador usará para enviar o formulário. Seus possíveis valores são:

• post: Envia os dados obtidos do formulário para o servidor;
• get: Anexa os dados do formulário a URL.

formvalidate

Esse atributo especifica que os dados do formulário não é para ser validado quando submetido.

formtarget

Esse atributo é um nome ou palavra-chave indicando onde exibir a resposta que é recebida após o envio do formulário. Seus possíveis valores são:

• _self: Carrega a resposta no mesmo contexto de navegação como atual;
• _blank: Carrega a resposta em um contexto de navegação sem nome;
• _parent: Carrega a resposta no contexto de navegação pai do atual;
• _top: Carrega a resposta para todo o contexto de navegação no nível superior.

name

Esse atributo especifica um nome para o botão.

type

Esse atributo especifica um tipo para o botão.

• submit: O botão envia os dados do formulário para o servidor;
• reset: O botão volta os dados do formulário para seus valores iniciais;
• button: O botão não possui comportamento padrão.

value

Esse atributo especifica um valor inicial para o botão.

Exemplos de uso da tag <button>

Exemplo 1

No Código 2 demonstraremos uma forma simples de aplicar o botão no código HTML.

  <div>
    <p>Clique no botão abaixo:</p>
    <button>Clique aqui</button>
  </div>
  

Note que neste exemplo o botão foi criado sem utilizar nenhum atributo. Neste código o botão não realizará nenhuma ação ao ser clicado.

Exemplo 2

Neste exemplo o Código 3 demonstraremos como aplicar um botão em um formulário.

  <form>
    <input type='text' placeholder='Digite o seu nome'/>
    <button type='button'>Enviar</button>
  </form>
  

Note que neste exemplo o botão foi criado com o atributo type que recebeu o valor ‘button’. Com isso, ao clicar no botão, ele não irá submeter o que for escrito no <input>.

Exemplo 3

Nos Códigos 4 e 5 demonstraremos um botão que submeterá um formulário.

  <form id="formulario">
    <button type="submit">Botão com type submit</button>
  </form>
  

  document.querySelector('#formulario').addEventListener('submit', function (e) {
        e.preventDefault();
        document.body.append('Formulário submetido')
  })
  

Note que neste exemplo foi preciso escrever código JavaScript para apresentar o resultado do clique no botão.

Exemplo 4

Nos Código 6 a 8 demonstraremos um botão aplicado com estilo CSS e que possui a capacidade de alterar esse estilo ao ser clicado.

  <div>
    <h1>Clique no botão abaixo e altere o seu estilo:</h1>
    <button id="novaCor" onClick="cliqueBtn()">Clique aqui</button>
  </div>
  

  button {
    font-size: 18px;
    font-weight: 600;
    background-color: aqua;
    border-radius: 12px;
    border: 0;
    padding: 10px 20px;
    cursor: pointer;
  }
  

  function cliqueBtn() {
    document.getElementById("novaCor").style.background = "red";
    document.getElementById("novaCor").style.color = "white"
  }
  

Note que neste exemplo utilizamos um id e a propriedade onClick no botão. O id será utilizado dentro de uma função JavaScript e o onClick será utilizado para acionar a função JavaScript quando o botão for clicado.

Com o JavaScript conseguimos criar uma função que dá a capacidade de alterar o estilo do botão quando este for clicado e com o código CSS, conseguimos alterar de diversas formas o visual de um botão.

Compatibilidade com navegadores

O <button> é suportado em todos os navegadores apresentados na tabela abaixo: