Personalize o botão ENVIAR do formulário – reload

Navegando pelo Blog do Newton de Góes Horta um competente professor de matemática, li uma matéria muito interessante destinada a demonstrar uma das muitas funcionalidades do AJAX com a apresentação de um formulário interativo para gerenciamento de uma tabela de dados.

Além da demonstração, o que me chamou a atenção, talvez pela lembrança de um post recente que fiz em meu Blog, foi um conjunto de 4 botões destinados a acionar os diferentes scripts da rotina. Ato contínuo, imaginei como ficaria aquela fileira de botões se no lugar deles, fosse inserido ícones.
Estava associando aquele formulário com a matéria “Personalize o botão ENVIAR do formulário” e veio a inspiração para escrever esta matéria

Vamos lá!
Sugiro começar dando uma olhada no formulário do Newton.
A seguir observe o código que gerou aquela fileira de botões:

<div id="botoes">
<input type="button" value="Incluir" />
<input type="button" value="Alterar" />
<input type="button" value="Excluir" />
<input type="button" value="Consultar" />
</div>

Quatro botões type=”button”, cada um com um nome declarado no atributo value designando sua função e todos colocados dentro de uma DIV com id=”botoes”
Eu retirei do código original os atributos que não interessam a esta matéria, tais como class, onclick, disabled, etc.
Convém notar que não está em discussão a estrutura do código do formulário. O foco desta matéria é tão somente para a substituição dos botões, por ícones.

E a proposta é de fazer a substituição conforme mostrado abaixo:

O código que faz a sustituição:

<div id="botoes">
<input type="image" src="inclui.gif" />
<input type="image" src="modifica.gif" />
<input type="image" src="elimina.gif" />
<input type="image" src="pesquisa.gif" />
</div>

E a aparência final do formulário com a substituição dos botões

E a acessibilidade? perguntarão alguns mais atentos.
Sugiro as seguintes experiências:

1. Ver as duas versões atuais do formulário nas seguintes condições:
   • CSS desabilitada;
   • imagens desabilitadas;
   • CSS e imagens desabilitadas;
2. Reproduzir as versões do formulário usando os atributos “title” e “alt” e repetir as visualizações nas condições do item acima.
3. Comentar suas conclusões, discordar, discutir e polemizar, pois da discussão nasce a luz. A vida toda é um aprendizado para todos, ninguém é o dono da verdade e muito menos o “sabe tudo”.

Ah sim! O Newton está pensando em escrever uma matéria explicando o funcionamento dos scripts do formulário.