Em muitas ocasiões temos que construir páginas web nas que a forma geral dos elementos da mesma não é retangular, fazendo com que a inclusão de botões de formulário padrão rompam este design, ao introduzir elementos retangulares na composição.

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.