Botões HTML com a etiqueta BUTTON

Como criar botões HTML mais variados utilizando a etiqueta BUTTON, que permite colocar imagens e outros conteúdos no botão.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 22/6/09
Valorize este artigo:
Veremos uma etiqueta HTML que serve para fazer botões, e que não havíamos falado antes em nosso manual de HTML. Esta etiqueta é <button>, que permite a criação de botões mais personalizados, o que oferece algumas vantagens, e igualmente uns inconvenientes que vamos tratar aqui. Antes de tudo, deveríamos dizer que em CriarWeb.com já havíamos comentado obre outra etiqueta que servia para fazer botões, a etiqueta <input>, que ademais tem outros usos. Vamos explicar também as diferenças entre fazer botões com <button> e <input>.

Primeiro, teríamos que conhecer bem os usos da etiqueta INPUT, que serve para fazer várias coisas, como campos de texto, campos ocultos, botões de enviar formulário, apagar seus dados e botões normais.

Utilização da etiqueta <BUTTON>

A etiqueta BUTTON se utiliza com uma abertura de etiqueta <BUTTON> e uma de fechamento </BUTTON>. Entre as duas etiquetas, de abertura e de fechamento, se coloca o conteúdo que irá dentro do botão.

Tem a particularidade que se podem colocar dentro do botão os conteúdos que se desejar, ou seja, entre a etiqueta de abertura e de fechamento se pode colocar texto a voluntade, porém também outras etiquetas HTML, como imagens, quebras de linhas, negritos ou o que possamos necessitar.

Vejamos um exemplo:

<button>
Olá isto é um <b>botão</b>
<br>
<br>
Posso colocar quebras de linha nele!
<hr>
E outras coisas
<br>
<img src="http://www.criarweb.com/images/logo_desarrollo_web.gif" width="261" height="35" alt="">
</button>

Que teria este aspecto:

Como se pode ver, permite trazer bastante criatividade aos botões que incorporemos em páginas web, muito mais que a etiqueta INPUT, que só permite colocar texto dentro do botão:

<input type="button" value="texto do botão">

Atributos de BUTTON

Agora vejamos rapidamente os atributos que podemos utilizar:

  • name: serve para lhe dar um nome ao botão. Ao se enviar o formulário se enviarão os dados do botão sob este nome.
  • type: serve para indicar o tipo de botão, que poderia ser: button para um botão normal, reset para um botão de excluir dados do formulário e submit para um botão de envio de formulário.
  • value: para especificar o valor de um botão. O valor é o que se enviará por formulário, no momento do submit. Porém, atenção aqui porque pode haver diferenças entre navegadores, que veremos a seguir.
  • disabled: este atributo serve para fazer com que o botão se encontre desabilitado.
Incompatibilidades entre navegadores com a etiqueta BUTTON

Lamentavelmente, a etiqueta BUTTON tem diversas interpretações por parte dos distintos navegadores do mercado. Nós de CriarWeb.com advertimos que se deve ter cuidado quando a usarmos, porque estas incompatibilidades poderiam prejudicar o bom funcionamento da página.

  1. Por padrão, o atributo type de BUTTON tem o valor "button" em todos os navegadores, salvo em Internet Explorer, pelo menos até a versão 7, que dá por padrão valor "submit". Isto o solucionamos simplesmente colocando sempre o atributo type com o valor que quisermos.
  2. Quando se envia um formulário com um botão criado com a etiqueta BUTTON, Internet Explorer envia como value do botão o que houver escrito nele, ou seja, o texto que tiver entre <BUTTON> e </BUTTON> com todas as etiquetas que possa ter dentro. Os demais navegadores enviam o atributo value que tiver o botão, embora só façam isso quando o botão é de type="submit" e se se enviou o formulário clicando esse botão.
Destas duas incompatibilidades, a segunda tem mais difícil solução, porque deveríamos saber o navegador que está utilizando o usuário para poder saber o comportamento do BUTTON. É por isso que o mais recomendável é não basear o funcionamento de scripts em formulários nesta etiqueta. No demais, tem algumas funcionalidades interessantes que poderiam ser úteis em algum momento.





Comentários do artigo
Foi enviado 1 comentário ao artigo
1 comentário não revisado
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato