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

Você está no BLOG do Maujor. IR PARA O SITE

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

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

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

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 http://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