Por Luciano Moreno
Neste caso, podemos recorrer à simulação de botões mediante imagens, com o qual a liberdade do design será completa, podendo construir botões ovais, circulares, triangulares, etc. Suponhamos que construímos a seguinte imagem gif:
Só nos resta agora lhe dar vida mediante código JavaScript, o que se consegue de forma fácil, incluindo a imagem dentro de um link que chame ao método submit do objeto form, com o qual acessamos ao formulário.
O código necessário é 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 botão com os lados arredondados, e que é compatível com todos os navegadores, ao ser na verdade uma imagem. Adicionamos uma classe de estilo (.link) para que ao situar o cursor sobre o botão não apareça a mão típica dos links, e sim, a seta característica dos botões; a desvantagem é este último só funciona no Internet Explorer e no Netscape 6x, enquanto que no Netscape 4x continuará aparecendo a mãozinha.
A principal diferença entre usar uma imagem e usar um botão padrão é que no caso da imagem perdemos a funcionalidade de foco dos botões, ou seja, que se agora situarmos o cursor na caixa de texto e clicarmos a tecla Enter, os dados do formulário não serão enviados. Veremos como podemos consertar isto.
| Nota: Em alguns navegadores, por exemplo Internet Explorer 6, não chega a perde a funcionalidade do envio do formulário com o clique da tecla Enter. |
