Botões e HTML

Apesar dos formulários serem uma das partes mais importantes de toda aplicação web, é certo que a linguagem HTML nos oferece poucas (por não dizer nenhuma) opções para adaptar seus elementos ao design de nossa página.

Efetivamente, são poucos os componentes sobre os quais podemos atuar para mudar seu aspecto externo. Temos a opção 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 seleção mediante espaços para conseguir que tenha um tamanho adequado, etc. Porém, um dos elementos mais operativos, os botões de formulário ficam praticamente fora destas configurações.

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

Ou seja, de fundo cinza, com aspecto 3D e com poucas mais possibilidades.

O botão anterior é do tipo submit, que, ademais, tem por objeto executar o envio dos dados do formulário. Desta forma, se temos um formulário com um campo de texto, cujo atributo action aponta à página de Yahoo Brasil, definido pelo código:

Sempre que clicarmos sobre este botão, abrirá uma janela nova (target="_blank") com a página de Yahoo (valor de action). Mas também ocorrerá o mesmo, pela própria definição, sempre que, tendo o foco em um dos objetos do formulário, 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 questão é: 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 botões de formulário, fazendo uso de complementos à linguagem HTML, como as Folhas de Estilos em Cascata (CSS), ou então simulando estes componentes.