HTML Button: Adicionando um botão HTML em seu site

O HTML Button é um dos artifícios do HTML que permite introduzir botões a nossas página HTML. Nesse artigo vamos descobrir como utilizar o Button em nossas páginas. Os tópicos deste artigo são então:

A tag <button>

O HTML Button pode ser definido pela tag de abertura <button> e a tag de fechamento </button>. Dentro de um elemento <button>, você pode colocar conteúdo, como texto ou imagens. Essa é a principal diferença entre esse elemento e os botões criados com o elemento <input>.

Dessa forma, podemos utilizar a seguinte sintaxe:

<button>Click Aqui</button>

Com isso, o resultado será conforme a imagem do exemplo abaixo:

HTML Button exempllo01

Atributos do HTML Button

O HTML Button é um elemento que permite o uso dos atributos globais e também atributos de eventos. Além desses, temos também os seguintes atributos:

Atributo Valor Descrição
autofocus autofocus especifica que ao ler a página, esse botão recebe um auto foco.
disabled disabled especifica que esse botão está desabilitado.
form form_id especifica um ou mais botões para formulários.
formaction URL especifica a URL a qual será enviado as informações do formulário.
formmethod get
post
especifica o método de envio do formulário.
name name  especifica um nome ao botão.
type button
reset
submit
 especifica um tipo ao botão.
value text  especifica uma valor inicial ao botão.

Desses atributos, o mais importante a ser declarado e no HTML Button ó type, que pode exercer diferentes características nos diversos navegadores.

Porém, é fácil perceber que, boa parte desses botões são utilizados hoje em dia como input, A vantagem de utilizar o HTML Button é a liberdade de estilização permitida através do CSS, além de poder incluir elementos como imagens.

O atributo type

O tipo de HTML Button. O possíveis valores são:

  • submit: O botão envia os dados do formulário para o servidor. Esse é o padrão se o atributo não for especificado, ou se o atributo é dinamicamente mudado para um valor vazio, ou inválido.
  • reset: O botão restaura todos os controles para seus valores iniciais.
  • button: O botão não possui comportamento padrão. Ele pode ter scripts do lado do cliente associado com os eventos do elemento, no qual são acionados quando o evento ocorrer.

Vejamos, então o exemplo abaixo:

<form>
    <input type="text">
    <button type="submit">Enviar</button>
</form>

dessa forma, o resultado será como na imagem abaixo:

Ou ainda podemos usar o tipo button para chamar um script como no exemplo abaixo:

<button type="button" onclick="Evento()">Evento</button>

<script>
    function Evento(){
        alert('evento funcionando')
    }
</script>

onde ao clicar no botão, chamará a função  evento, ou seja, um alerta com o texto “evento funcionando”.

Input do tipo Button

Também é possível chamar um input do tipo botão, com o atributo type button.

<input type="button" value="enviar">

Dessa forma temos o resultado como na imagem abaixo:

Este artigo foi útil?

Obrigado pela resposta!
Picture of Rafael Marques

Rafael Marques

Especialista em Desenvolvimento Web e Marketing. É apaixonado por tecnologia, empreendedorismo, audiovisual e animais. Em sua carreira, dedica-se ao empreendedorismo, além de atuar como Desenvolvedor Fullstack e redator técnico. Gosta de usar seu tempo livre para assistir a filmes, jogar, escrever, e passar um bom tempo brincando e mimando seus animais de estimação.

Contato: rafael.blog@homehost.com.br

Ganhe 30% OFF

Indique seu nome e e-mail,e ganhe um cupom de desconto de 30% para sempre na Homehost!