Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

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

Publicado em: 2006-06-5 — 31.316 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:

Os botões default e os respectivos ícones

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.

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.

15 comentários na matéria: “Personalize o botão ENVIAR do formulário – reload”

  1. LucasNo Gravatar disse:

    Olá

    Queria saber como faço para enviar os dados escritos no formulario, para um email de minha escolha.

    Grato

  2. Viche » O Experimento Ajax #1 Desnudado disse:

    […] 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. […]

  3. Marco GomesNo Gravatar disse:

    Por favor, MarcO. Sem “s”.

    Mais uma concordando comigo, daqui a pouco lanço minha candidatura a presidente 🙂

  4. No Gravatar disse:

    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!

  5. Marco GomesNo Gravatar disse:

    FINALMENTE alguém concorda comigo!!! Eu já estava me sentindo só 🙁

  6. Bruno DulcettiNo Gravatar disse:

    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…

  7. Marco GomesNo Gravatar disse:

    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…

  8. Osny Santos NettoNo Gravatar disse:

    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.

  9. No Gravatar disse:

    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…

  10. MicoxNo Gravatar disse:

    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)

  11. Marco GomesNo Gravatar disse:

    Por isso insisto que a substituição deve ser feita com CSS.

  12. Marco GomesNo Gravatar disse:

    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?

  13. Lucas AlvesNo Gravatar disse:

    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.

  14. MaujorNo Gravatar disse:

    @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.

  15. No Gravatar disse:

    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!

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo