Personalize o botão ENVIAR do formulário

O designer entrega para você codificar, uma imagem de um formulário com um visual digno de premiação e o botão de envio foi criado com o conhecido efeito aqua, facilmente obtido em um editor gráfico.
Você conhece a fundo como codificar o botão padrão
Mas, e esse botão com efeito aqua? Começa a ‘dar tratos à bola’ para descobrir como transformá-lo em e sem perda da sua funcionalidade, ou seja enviar o formulário.

Com relação a esta questão, você com toda certeza enquadra-se em um dos seguintes grupos de desenvolvedores: não tem a mínima idéia de como fazer – é fácil e sabe como fazer, mas desconhece como resolver as questões de acessibilidade ao botão – sabe tudo sobre tais botões.
Qualquer que seja o grupo a que você pertence, seria ótimo que você continuasse lendo, seja para aprender, seja para se aperfeiçoar, seja para conferir a matéria.

As Recomendações do W3C

Vamos consultar as Recomendações do W3C para o HTML4.01. Abaixo transcrevo os trechos que interessam a esta matéria e que retirei da tradução que fiz para as Recomendações do W3C para formulários

17.2.1 Tipos de controle

HTML define os seguintes tipos de controle:

botões

Autores podem criar três tipos de botão:

• botão submit: Quando ativado, envia o formulário. Um formulário pode conter mais de um botão submit.
• botão reset: Quando ativado, reseta todos os valores do formulário para seus valores iniciais.
• botão push: Não possui um comportamento padrão. Todo botão push deve ter um script do lado do cliente associado aos atributos event do elemento. Quando um evento ocorre (p.ex.:, o usuário pressiona ou solta um botão, etc), o script é acionado.
  Autores devem definir a linguagem do script para um botão push na declaração padrão para scripts (no elemento META).

17.4.1 Tipos de controle criados com INPUT

O tipo de controle definido pelo elemento INPUT depende do valor do atributo type:

…………..

image

Cria um submit button gráfico. O valor do atributo src especifica a URI da imagem a ser usada na decoração do botão. Por questões de acessibilidade os autores devem fornecer um texto alternativo para a imagem via o uso do atributo alt.
Quando um dispositivo apontador for usado para clicar na imagem o formulário será enviado e as coordenadas do ponto de clicagem passadas ao servidor.

O código para o botão padrão

Para criar um botão "ENVIAR" padrão a ser renderizado com apresentação dependente do navegador do usuário usamos o elemento INPUT com o atributo type="button" e o atributo value="ENVIAR", conforme mostrado a seguir:

<input type="buttom" value="ENVIAR" />

Que é renderizado conforme mostrado abaixo:

Nota: Botões criados como mostrado acima são renderizados com apresentação e tamanhos diferente de acordo com o navegador em que são visualizados. Para padronizar a apresentação destes botões estilize com folhas de estilo em cascata

O código para o botão aqua

Para criar um botão "ENVIAR" gráfico (com uso de qualquer imagem) a ser renderizado com apresentação idêntica em qualquer navegador usamos também o elemento INPUT com o atributo type="image", o atributo value="ENVIAR", o atributo src="caminho/imagem.gif" e o atributo alt=descrição da imagem, conforme mostrado a seguir:

<input type="image" src="/botao-aqua.gif" value="ENVIAR" alt="botão enviar com efeito aqua" />

Que é renderizado conforme mostrado abaixo:

Isto é tudo. Quando necessário você poderá substituir o botão ENVIAR de um formulário por uma imagem. Faça bom uso.