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