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

15% OFF

Dessa forma, podemos utilizar a seguinte sintaxe:

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.

Ainda não tem um www

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:

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

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

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.

Dessa forma temos o resultado como na imagem abaixo:

Publicado por

Rafael Marques

Desenvolvedor Web especialista em Front End apaixonado por tecnologia! www.instagram.com/rm.developer/ linkedin.com/in/rafamarquesrmb/

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

hhchat