Manuais e recursos para desenvolvimento web www.criarweb.

com

Botes com estilo

Autores do manual Este manual foi criado pelos seguintes colaboradores de Criarweb.com: Luciano Moreno
(6 captulos)

Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Botes e HTML
Apesar dos formulrios serem uma das partes mais importantes de toda aplicao web, certo que a linguagem HTML nos oferece poucas (por no dizer nenhuma) opes para adaptar seus elementos ao design de nossa pgina. Efetivamente, so poucos os componentes sobre os quais podemos atuar para mudar seu aspecto externo. Temos a opo de dar mais ou menos longitude a um textarea ou a uma caixa de texto, de configurar o tamanho da fonte das mesmas, de "adulterar" uma lista de seleo mediante espaos para conseguir que tenha um tamanho adequado, etc. Porm, um dos elementos mais operativos, os botes de formulrio ficam praticamente fora destas configuraes.
Referncia: Em nosso manual de HTML voc poder encontrar uma srie de artigos sobre formulrios que lhe ajudaro na tarefa de confeccionar estes elementos interativos.

Assim, sempre que introduzirmos em nossa pgina um elemento submit, reset ou button, seu aspecto ser do tipo:

enviar

Ou seja, de fundo cinza, com aspecto 3D e com poucas mais possibilidades. O boto anterior do tipo submit, que, ademais, tem por objeto executar o envio dos dados do formulrio. Desta forma, se temos um formulrio com um campo de texto, cujo atributo action aponta pgina de Yahoo Brasil, definido pelo cdigo:
<div align="center"> <form name="form1" action="http://br.yahoo.com" target="_blank" method="post"> <input type="text" name="prova"><br><br> <input type="submit" value="enviar"> </form> </div>

Sempre que clicarmos sobre este boto, abrir uma janela nova (target="_blank") com a pgina de Yahoo (valor de action). Mas tambm ocorrer o mesmo, pela prpria definio, sempre que, tendo o foco em um dos objetos do formulrio, clicarmos a tecla Intro ou a tecla Enter . Voc pode comprovar isso no exemplo anterior, situando o cursor sobre a caixa de texto e clicando Enter. A questo : Podemos de alguma forma mudar o aspecto destes elementos? E a resposta, felizmente, que sim. Veremos a seguir como podemos mudar o aspecto exterior dos botes de formulrio, fazendo uso de complementos linguagem HTML, como as Folhas de Estilos em Cascata (CSS), ou ento simulando estes componentes. Artigo por Luciano Moreno

Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Botes e CSS
As Folhas de Estilos em Cascata (CSS) so sem dvida uma das ferramentas mais teis que podemos usar em nossas pginas web. Permite-nos definir o aspecto com o qual se apresentaro todos e cada um dos elementos de uma pgina web, conseguindo com isso a buscada separao entre dados e apresentao, to buscada pelos desenvolvedores. Mediante CSS podemos melhorar notavelmente o aspecto dos nossos botes de formulrio, sempre e quando o navegador usado por nosso visitante suporte a aplicao de estilos a estes elementos, ou seja, todos os navegadores de 5 e 6 gerao.
Referncia: Est disponvel em CriarWeb um manual de folhas de estilo CSS que lhe mostrar como utilizar esta tecnologia para criar pginas mais atrativas e precisas.

Como exemplo, vamos modificar o aspecto externo do boto da pgina anterior, colocando um fundo azul, tirando o aspecto 3D e colocando o texto em branco, com fonte Verdana de 10 pixels. Tambm vamos definir seu tamanho exato. O cdigo necessrio ser:
<style type="text/css"> .botao{ font-size:10px; font-family:Verdana,Helvetica; font-weight:bold; color:white; background:#638cb5; border:0px; width:80px; height:19px; } </style> <div align="center"> <form name="form1" action="http://br.yahoo.com/" target="_blank" method="post"> <input type="text" name="prova"><br><br> <input type="submit" value="enviar" class="boton"> </form> </div>

Cujo resultado o seguinte:

enviar

Analisando um pouco o cdigo anterior, vemos que definimos uma classe de estilo, .boton, que define os atributos desejados para nosso boto. A classe vem definida estabelecendo, dentro das etiquetas <style...>...</style> o nome da mesma precedido por um ponto, umas chaves e dentro delas os atributos desejados com seus valores. Desta forma podemos fixar o aspecto concreto de nossos botes, tendo a liberdade para definir quantas classes necessitarmos. Como vantagens deste mtodo esto a total configurao de aspecto e que continuamos tendo um boto submit padro (que ao clicarmos a tecla Enter sero enviados os dados do formulrio). As desvantagens so que estas caractersticas de estilos para botes no so aceitas pelo Netscape 4x e que continuamos tendo a limitao de botes retangulares. Artigo por Luciano Moreno

Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Botes e imagens
Em muitas ocasies temos que construir pginas web nas que a forma geral dos elementos da mesma no retangular, fazendo com que a incluso de botes de formulrio padro rompam este design, ao introduzir elementos retangulares na composio. Neste caso, podemos recorrer simulao de botes mediante imagens, com o qual a liberdade do design ser completa, podendo construir botes ovais, circulares, triangulares, etc. Suponhamos que construmos a seguinte imagem gif:

S nos resta agora lhe dar vida mediante cdigo JavaScript, o que se consegue de forma fcil, incluindo a imagem dentro de um link que chame ao mtodo submit do objeto form, com o qual acessamos ao formulrio. O cdigo necessrio do tipo:
<style type="text/css"> .link{cursor:default;} </style> <div align="center"> <form name="form1" action=" http://br.yahoo.com/" target="_blank" method="post"> <input type="text" name="prova"><br><br> <a class="link" href="#" onclick="document.forms.form1.submit();return false"> <img src="images/botao.gif" width="85" height="24" border="0" alt="enviar"> </a> </form> </div>

Cujo resultado o seguinte:

Obtemos assim um boto com os lados arredondados, e que compatvel com todos os navegadores, ao ser na verdade uma imagem. Adicionamos uma classe de estilo (.link) para que ao situar o cursor sobre o boto no aparea a mo tpica dos links, e sim, a seta caracterstica dos botes; a desvantagem este ltimo s funciona no Internet Explorer e no Netscape 6x, enquanto que no Netscape 4x continuar aparecendo a mozinha. A principal diferena entre usar uma imagem e usar um boto padro que no caso da imagem perdemos a funcionalidade de foco dos botes, ou seja, que se agora situarmos o cursor na caixa de texto e clicarmos a tecla Enter, os dados do formulrio no sero enviados. Veremos como podemos consertar isto.
Nota: Em alguns navegadores, por exemplo Internet Explorer 6, no chega a perde a funcionalidade do envio do formulrio com o clique da tecla Enter.

Artigo por Luciano Moreno

Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Botes, CSS e tabelas

Visto que com o uso exclusivo de uma imagem perdemos a propriedade de envio de dados mediante teclado, vamos agora desenhar um boto complexo, formado por diversas peas que vamos montar usando uma tabela, de tal forma que o corpo do boto resultante seja um elemento padro HTML. Para isso vamos partir da imagem do exemplo anterior, a qual vamos recortar os dois extremos curvos, usando para isso algum programa grfico, como Paint Shop Pro. O processo se resume na seguinte figura:

Com isto, obtemos os dois extremos que vo nos fazer falta para nosso truque. O seguinte passo criar uma tabela que contenha em seus extremos laterais as imagens anteriores, ficando no centro uma clula vazia (para que se mantenham os tamanhos das clulas sem contedo introduzimos nelas um gif transparente de 1x1 pixels, bs.gif):

Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

Na clula vazia vamos situar o boto com estilos do exemplo 2, obtendo com isso uma reproduo do que era a imagem inteira, mas que agora ser uma tabela-boto:
<style type="text/css"> .botao2{ font-size:10px; font-family:Verdana,Helvetica; font-weight:bold; color:white; background:#638cb5; border:0px; width:70px; height:15px; } </style> <form name="form1" action="http://www.yahoo.com" target="_blank" method="post"> <div align="center"><input type="text" name="prova"></div><br> <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td rowspan="3" width="5" height="19"><img src="images/curva_azul_izq.gif" width="5" height="19" border="0" alt=""></td> <td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0" alt=""></td> <td rowspan="3" align="right" width="5" height="19"><img src="images/curva_azul_der.gif" width="5" height="19" border="0" alt=""></td> </tr> <tr align="center"> <td height= "17" bgcolor="#638cb5"><input type="submit" name="envio" value="enviar" class="boton2"></td> </tr> <tr> <td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0" alt=""></td> </tr> </table> </form>

Cujo resultado o seguinte:

enviar

Este boto colorido, tem os lados curvos e admite os eventos tpicos dos botes-padro, portanto se situarmos o cursor na caixa de texto e clicamos Enter, os dados se enviaro. Alm disso, tambm podemos acessar as demais propriedades de um boto, por exemplo, a disabled (Internet Explorer e Netscape 6x), que ativa ou desativa um boto, de tal forma que aparece normal ou "morto", sem ter operatividade. O cdigo necessrio para isso :
<div align="center"><a href= "#"onclick="document.forms.form1.envio.disabled=true;return false;">desativar</a></div> <div align="center"><a href= "#"onclick="document.forms.form1.envio.disabled=false;return false;">ativar</a></div>

Que pode ser visto em funcionamento a seguir:

Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 6

Manuais e recursos para desenvolvimento web www.criarweb.com

desativar ativar Se clicarmos no link "desativar", poderemos observar como o texto do boto aparece no Internet Explorer com a cor cinza, e se clicarmos sobre ele no acontecer nada. O mesmo ocorre no Netscape 6x, embora neste caso o texto do boto no sofre mudanas. Ao clicar sobre o link "ativar", o boto volta ao seu estado inicial. O nico problema que no Netscape 4x o resultado fica muito feio, pelo fato deste navegador no admitir estilos para os botes. Portanto, este sistema aconselhvel para aquelas pginas que forem desenhadas Internet Explorer e/ou Netscape 6x. Artigo por Luciano Moreno

Botes, imagens e eventos

Segundo o que foi visto at agora, o boto mais compatvel o formado por uma imagem simples, ao ser visto igual em todos os navegadores. Entretanto, tnhamos o problema de que este tipo de boto ignora os eventos de teclado, portanto no envia os dados quando o usurio clica a tecla Enter. Uma soluo a este problema capturar tal evento, ou seja, o clique do usurio da tecla Enter, j que se o conseguimos poderemos chamar a uma funo JavaScript que nos envie o formulrio. O cdigo necessrio para isso o que segue, onde podemos apreciar que Internet Explorer e Netscape Navigator tm uma forma diferente de capturar os eventos, e que usamos o identificador de tecla 13, que o que corresponde a Enter (podemos usar a tecla ou teclas que necessitarmos):
<html> <head> <title>HTMLWeb. WebScript. Design. Botoes com estilo.</title> <style type="text/css"> .link{cursor:default;} </style> <script language="JavaScript" type="text/javascript"> /** * funcao demo do evento onclick na tabela */ function envia() { document.forms[0].submit(); } /** * funcao de captura de clique de tecla na Internet Explorer */ var tecla; function capturaTecla(e) { if(document.all) tecla=event.keyCode; else { tecla=e.which; } if(tecla==13) { document.forms[0].submit(); } Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao. 7

Manuais e recursos para desenvolvimento web www.criarweb.com

} document.onkeydown = capturaTecla; </script> </head> <body> <div align="center"> <form name="form1" action="http://br.yahoo.com" target="_blank" method="post"> <input type="text" name="prova"> </form> <a class="link" href="#" onclick="document.forms.form1.submit();return false"><img src="images/botao.gif" width="85" height="24" border="0" alt="enviar"></a> </div> </body> </html>

Cujo resultado o seguinte:

Com isto conseguimos o objetivo buscado: um boto cross-browser (compatvel com os diferentes navegadores), que ademais suporte os eventos caractersticos deste tipo de elementos de formulrio. O inconveniente que os textos que aparecem na imagem devem ser fixos, salvo que definamos diferentes imagens para os possveis casos. No caso de pginas que devam suportar multi-idioma, isto se converte em um obstculo importante. Veremos como podemos encontrar uma soluo para isto. Artigo por Luciano Moreno

Botes, tabelas e eventos

Para resolver o problema do multi-idioma o ideal seria contar com o boto tal que o texto que aparea nele seja acessvel mediante variveis de servidor, ou seja, que tenhamos sua estrutura de boto fixa, porm que possamos configurar seu contedo segundo nossas necessidades. Se nos baseamos no que foi estudado at agora, podemos usar a tabela-boto que havamos construdo, introduzindo em sua clula central um texto, ao invs de um boto padro com estilos. O problema a partir daqui ser dobrado: 1. Capturar o evento CLICK na tabela, de tal forma que quando o usurio clique sobre qualquer parte dela o formulrio seja enviado. 2. Capturar o evento da tecla Enter, para que se mantenha a funcionalidade tpica dos botes. Este segundo problema foi resolvido anteriormente, e quanto ao primeiro, basta aproveitar que o Internet Explorer e Netscape 6x suportam os eventos no elemento table. E como Netscape 4x no os suporta, inclumos em texto de boto dentro de um link, para que o resultado final seja de certa forma compatvel com todos os navegadores. O cdigo final necessrio ser do tipo:

Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

<html> <head> <title>HTMLWeb. WebScript. Design. Botes com estilo.</title> <style type="text/css"> .link,.link:hover{font-size:10px;font-family:Verdana,Helvetica;font-weight:bold;color:white;textdecoration:none;cursor:default;} .tabelaBotao{cursor:default;} </style> <script language="JavaScript" type="text/javascript"> var contador=false; /** * funcion demo do evento onclick na tabela */ function envia() { if(contador==false) document.forms[0].submit(); } function envia2() { document.forms[0].submit(); setTimeout("contador=false",500); } /** * funcao de captura de clique de tecla em Internet Explorer */ var tecla; function capturaTecla(e) { if(document.all) tecla=event.keyCode; else { tecla=e.which; } if(tecla==13) { document.forms[0].submit(); } } document.onkeydown = capturaTecla; </script> </head> <body> <div align="center"> <form name="form1" action="http://www.yahoo.com" target="_blank" method="post"> <input type="text" name="prova"> </form> </div> <table class="tabelaBotao" cellpadding="0" cellspacing="0" border="0" align="center" onclick="envia()"> <tr> <td rowspan="3" width="5" height="19"><img src="images/curva_azul_izq.gif" width="5" height="19" border="0" alt=""></td> <td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0" alt=""></td> <td rowspan="3" align="right" width="5" height="19"><img src="images/curva_azul_der.gif" width="5" height="19" border="0" alt=""></td> </tr> <tr align="center"> <td height= "17" bgcolor="#638cb5"><a href= "#"onclick="contador=true;envia2();return false" class="link">enviar</a></td> </tr> <tr>

Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

Manuais e recursos para desenvolvimento web www.criarweb.com

<td height= "1" width="70" bgcolor="#638cb5"><img src="images/bs.gif" width="1" height="1" border="0" alt=""></td> </tr> </table> </body> </html>

Cujo resultado o seguinte:

enviar

Notem como foi estabelecida duas funes diferentes, envia() e envia2(), uma chamada desde o link e outra desde o evento onclick da tabela, e uma varivel booleana, contador. O objetivo que ao clicar sobre "enviar" no se enviem duas vezes os dados do formulrio (j que o texto est dentro do link e dentro da tabela). A grande vantagem que apresenta este boto fictcio que "quase" compatvel com todos os navegadores, totalmente configurvel por ns mesmos e suporta acesso ao texto que deve aparecer no boto, com o que ideal para aplicaes multi-linguagem, nas quais o texto deve depender do idioma escolhido pelo usurio. Concluso Como vocs podem ver, usando a imaginao e as ferramentas simples que dispomos, fcil converter elementos "insossos" de nossas pginas em partes importantes do design das mesmas. Sempre existe alguma soluo s nossas necessidades de desenho, e para encontrala basta liberar nossa mente e deixar nossas idias flurem. Artigo por Luciano Moreno

Manual Botes com estilo: http://www.criarweb.com/botoes_estilo/ Os manuais de CriarWeb.com tm copyright dos autores. No reproduzir sem autorizao.

10