Personalize o botão ENVIAR do formulário – reload
Publicado em: 2006-06-5 — 31.504 visualizacoes
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:
- Ver as duas versões atuais do formulário nas seguintes condições:
- CSS desabilitada;
- imagens desabilitadas;
- CSS e imagens desabilitadas;
- Reproduzir as versões do formulário usando os atributos “title” e “alt” e repetir as visualizações nas condições do item acima.
- 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.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2006-06-5 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2006/06/05/botao-enviar-formulario-reload/trackback no seu site.
Olá
Queria saber como faço para enviar os dados escritos no formulario, para um email de minha escolha.
Grato
[…] O que me motivou a compartilhar com vocês os detalhes foi a divulgação do experimento no Blog da Visie, pelo Elcio Ferreira, algumas (confesso, não muitas) solicitações enviadas através do formulário de contato do VICHE e, por último, o artigo publicado no Blog do Maujor. […]
Por favor, MarcO. Sem “s”.
Mais uma concordando comigo, daqui a pouco lanço minha candidatura a presidente 🙂
kkkkkkkkkkkk…..
Essa é boa Marcos… huahauhauhaua….
Entendo sua idéia… a grande questão que tenho batido aqui é entendendo a questão do Maujor ter dito que seria para usar em um ambiente intranet, mas… em relação ao fato de se usar o Image Replacement em relação ao uso web… eu concordo com o Bruno, não tinha pensado nesta questão!
FINALMENTE alguém concorda comigo!!! Eu já estava me sentindo só 🙁
por mais trabalhoso que seja, prefiro fazer com classes e image replacement num input type button… que se o css tah desabilitado, aparece o botao e naum teria imagem, pois seria como background no css…
teria que ver mais na parte de javascript, caso esteja desabilitado mesmo…
Sim, no Links aparecem na tela quatro botões [submit], um ao lado do outro, o que eles fazem? Falta realmente um alt, porém, caso a substituição fosse por CSS isso não seria necessário, como vc pode conferir em: http://midiaclick.com.br/br/orcamento/formulario.aspx
Parece que o comentário do osny foi limado pelo filtro de comentários…
Antigamente usava:
<code></code> «editei aqui
Algo assim, mais estou mudando o jeito com que faço meus formulários.
Essa é uma boa, e bem simples.
Editado pelo Maujor: Para postar tags não use o sinal ‘menor que’ (o filtro ‘lima’) use & l t ; sem os espaços.
Marcos… caso a sua dúvida seja em relação aos programas usados por cegos, qndo vc diz sobre o usuário não conseguir ler… os programas leem o alt ou é o title das imagens, se não me engano…
Já a questão do navegador não exibir imagens… pergunto… vc desabilitou as imagens do seu browser? tipo… aparece escrito q é um botão de ação, para enviar algo, isso, junto ao alt e ao title… ja rola… e se tiver com legenda… melhor ainda…
Também não gostei muito da nova versão não… Como os colegas falaram, faltou alt, title, legenda.
Seria bom também mudar a imagem usando :hover (só uma sugestão a mais)
Por isso insisto que a substituição deve ser feita com CSS.
E se o usuário não puder ler? E se o navegador não exibe imagens? E como interpreta o robô de indexação de um sistema buscador?
Eu acredito que substituir o botão por imagem não tem problema nenhum, desde que a imagem esteja corretamente colcocada com seus atributos title, alt entre outros…assim um browser sem suporte a imagem podera visualizar as funcoes de cada botao.
@Jô
Ao escrever a matéria eu estava focado em um formulário administrativo de uso restrito em uma intranet ou no âmbito de uma organização onde os procedimentos são normatizados e os operadores com certeza seriam treinados e conheceriam a função de cada botão.
Com isso fugiu-me o ponto tão apropriadamente observado por você. Realmente se o formulário for projetado para uso aberto, a falta da legenda tão bem lembrada por você poderá confundir o usuário.
Não vejo mal algum em substituir os botões por imagens, mas, as tais qual foram substituídas, seria muito melhor ter uma legenda abaixo, não simplesmente o alt, pois por mais óbvios que sejam para nós tais figuras, para certas pessoas pode num ser tão óbvio… No mais… tudo tranquilo!