Blog do Maujor
Padrões Web


Personalize o botão ENVIAR do formulário

Publicado em: 2006-05-28 — 110.972 visualizacoes         

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 imagem de um botão com efeito aqua e escrito enviar 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.

----------------x-x-x---------------    fim da matéria    ---------------x-x-x---------------

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique o livro para detalhes.



capa livro javascript   capa livro html   capa livro css   capa livro jquery   capa livro ajax-jquery   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation

Enquete

Esta matéria foi publicada em: 2006-05-28 (domingo). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/05/28/botao-enviar-do-formulario/trackback no seu site.

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

  1. Erik MarquesNo Gravatar disse:

    Muito bom, da para estilizar o formulário do nosso jeito.. CSS é uma maravilha :)

  2. Bruno DulcettiNo Gravatar disse:

    Naum seria nem css naum erick… isso ae eh soh o html mesmo… e um editor gráfico para criar o botão… Nesse exemplo ae, nem foi usado css… ;)

  3. Rafael SousaNo Gravatar disse:

    muito boa a dica…
    só para acrescentar… quando você clica no botão os parametros x e y de onde você clicou na imagem são passados por get ou post.
    Ex: …./pagina.php?x=60&y=5

  4. CleytonNo Gravatar disse:

    Muito boa a matéria…!
    O elemento INPUT com o atributo type=”button” ou type=”submit” possibilita alterar sua forma no momento do click? qual seria a melhor forma de se obter um bom efeito utilizando o atributo type=”image” com CSS?
    Grato!.. =]

  5. Cláudio RodriguesNo Gravatar disse:

    Excelente! Além das possibilidades já disponíveis pelo CSS para o elemento input, com esta matéria potencializa as possibilidades de personalizar esses botões! Agradeço Maujor…

  6. MaujorNo Gravatar disse:

    @Cleyton:
    Com CSS você pode usar o seletor input:hover para obter uns poucos efeitos sobre um botão imagem.
    Por exemplo:
    input:hover {
    width: 100px;
    height: 50px;
    }

    Faz com que a imagem mude de dimensões quando o usuário coloca o ponteiro do mouse sobre ela.

    Você não conseguirá fazer rollover de imagem pois não tem acesso ao atributo src de input via CSS.

    Atenção: O IE não suporta :hover.

  7. JoaresNo Gravatar disse:

    Muito boa matéria… só pra variar!

  8. Cláudio RodriguesNo Gravatar disse:

    Sem querer sair do conteúdo, é possível no final do formulário, ao invés de utilizar o elemento “input”, se utilizar da tag “a href”?

  9. Lucas AlvesNo Gravatar disse:

    Eu tinha conhecimento disto, mas é sempre bom ler algo e os comentários também são de grande valia para todos.

    Abraços

  10. CleytonNo Gravatar disse:

    Obrigado pela dica Maujor!!

    @Cláudio Rodrigues:
    É possivel utilizar a tag a href com uso de JavaScript

    Ex: a href=”javascript:document.meuform.submit();”

    onde:
    meuform = nome do seu formulario
    submit() = metodo que envia o formulario

    Obs:
    – O metodo submit() não recebe parametros e envia o fomulario especificado (no caso “meuform”).
    – O link não precisa estar necessariamente dentro das tags “form” para funcionar corretamente.

    espero ter ajudado =]….

  11. Cláudio RodriguesNo Gravatar disse:

    @Cleyton
    Ajudou sim, pois conseguindo substituir os botões “enviar” e “limpar” utilizando a tag “a href” é possível fazer um rollower na imagem do botão, método que aprendi no site do Maujor…

  12. Cláudio RodriguesNo Gravatar disse:

    Ah, em tempo…. obrigado!

  13. Pedro RogérioNo Gravatar disse:

    Bem legal o efeito!!!

  14. Marco GomesNo Gravatar disse:

    Não! Este botão “enviar” está anti-semântico.

    Olhe novamente a recomendação da W3C, você deve usar o type="submit" para botões de envio de formulário.

    O botão é estilizado? Com efeito aqua? Com firulas? Não importa, isso não é trabalho pro XHTML, é trabalho pro CSS, lembre-se, visual você trata no CSS, estrutura no XHTML.

    Acha que não é possível estilizar um input? Eu ralei um pouco e consegui: http://www.midiaclick.com.br/br/orcamento/formulario.aspx retire os estilos (no Firefox é mais fácil) para ver o botão submit sem CSS.

  15. Claudio RodriguesNo Gravatar disse:

    Interessante o teu botão enviar Marcos, consegue fazer um assim mas com a beleza de um botão água?

  16. MaujorNo Gravatar disse:

    A personalização do botão ENVIAR para formulários como mostrado na matéria é válida e a marcação é semântica.
    As Recomendações do W3C conforme transcrito na matéria dizem claramente:

    O tipo de controle definido pelo elemento INPUT depende do valor do atributo type:
    …………..
    image
    Cria um submit button gráfico.

    Se você está com dúvidas leia o texto completo e traduzido, das recomendações do W3C para formulários.
    Nota: É incorreto referir-se a botões, páginas, imagens, menus e elementos de interface em geral como sendo “anti-semânticos”.
    Semântico ou não semântico é uma propriedade do código de marcação.
    O correto é: foi usada uma marcação não semântica para este ou aquele elemento da página.

  17. Claudio RodriguesNo Gravatar disse:

    Reexaminando o proposto pelo Marco, verifiquei que no arquivo .css que foi utilizado para estilo na página, especificamente o arquivo orcamento.css, #btnEnviar, está uma imagem .png como background, sendo assim fica evidente que poderia colocar um botão água do mesmo modo! Muito pouco ainda entendo desta programação, mas o artigo colocado pelo Maujor me parece prático e objetivo…

  18. Marco GomesNo Gravatar disse:

    Eu não disse que o type=image é anti semantico, eu disse “está”, ou seja, o uso dele, neste caso, não é apropriado.

    Se existe o type submit, porque usar o type image?

  19. CleytonNo Gravatar disse:

    Com o uso de JavaScript é possivel criar inumeros efeitos vizuais, como alterar a propriedade src="" de um elemento input type=image no momento em que o cursor passa por cima dele (onmouseover).

    Mas o que diz no W3C a respeito da utilização de JavaScript para esse tipo de efeito vizual….?

  20. VolneyNo Gravatar disse:

    Como eu faço substituir o botão enviar com o exemplo acima numa página html que já tem um formulário definido?

    Agradeço qualquer ajuda

  21. MaujorNo Gravatar disse:

    @Marco:
    O W3C normatiza um botão type:image e diz que destina-se a criar um botão submit gráfico, então podemos concluir que ele serve para: => criar um botão submit com uma imagem.

    @Cleiton:
    Web Standards preconiza:
    CSS para apresentação;
    HTML para marcação;
    ECMAScript para comportamento.
    O que é ECMAScript

    @Volney:
    Substitua no código do formulário:
    <input type=”submit” … / >
    por
    <input type=”image” src=”caminho/suaimagem.gif” … / >

  22. VolneyNo Gravatar disse:

    Agradeço a resposta. Antes de ter feito a pergunta, eu já tinha tentado de todas as maneiras possíveis fazer do jeito sugerido em toda a matéria, mas infelizmente deu erro. Se seu tempo permitir e se não for muito incômodo, eu gostaria que você desse uma olhada na página de contato do meu site para ver aonde pode ser inserido um código diferente para poder funcionar.

    http://www.imoveisfloripa.brz1.com/Contato.htm

    Esse site foi desenvolvido por mim mesmo, na base do “futuca-fuxica- erra-e-faz-de-novo”. Não sou webmaster e para fazer funcionar esse meu site, deu um trabalho danado.
    Muito obrigado por qualquer ajuda!!

  23. Marco GomesNo Gravatar disse:

    Paremos a discussão, já que não vamos chegar a lugar algum com ela.

    Eu acho que um input de tipo imagem para submeter formulário é tão “ruim” quanto um br ou hr, acho também que apresentação DEVE ser definida no CSS. Mas vc não acha isso, então tudo bem, melhor parar a baboseira toda.

  24. MaujorNo Gravatar disse:

    @Marco:
    Há uma frase que diz: Da discussão nasce a luz.
    Não paremos :-)
    Quanto mais comentários discordando, tanto melhor para todos.
    Discordar não é ofender, pelo contrário, é colaborar.
    Eu concordo com você e incluiria B, I que são meramente para apresentação.
    O que vocês acham de :hover e :focus ? São para apresentação ou comportamento?

    O ponto não é este.
    O que eu quis colocar é que todas estas questões com as quais eventualmente eu e vc não concordamos, são válidas uma vez que previstas nas Web Standards.
    Existindo dois ou mais caminhos válidos para se codificar, a decisão de usar um ou outro é pessoal.

  25. CleytonNo Gravatar disse:

    @Maujor

    Obrigado pela dica!!

    A respeito de identificar se o elemento é semântico ou não semântico.. não entendi nadinha…

    assim como o Volney aprendi tudo que sei na base do futuca-fuxica-erra-e-faz-de-novo e tenho pouco conhecimento teorico…
    procuro aprimorar meus conhecimentos em blogs como o seu e artigos de sites como imasters

    Agradeço a atenção!

  26. VolneyNo Gravatar disse:

    Maurício,

    Muito obrigado pela ajuda. Sua atenção, profissionalismo e rapidez com que respondeu a minha dúvida foram dignas de uma nota 10.

    Muito obrigado novamente e continue com esse ótimo blog que , sem dúvida, é um dos melhores que já encontrei.

    Se precisar de uma ajuda aqui em Florianópolis, não hesite em me contactar.

  27. Osny Santos NettoNo Gravatar disse:

    Maurício, basta ver as estatisticas, para ver que cada nova matéria publicada, aumenta considerávelmente o numero de visitas, continue postando.
    Muito obrigado pela dedicação a nós leitores.
    Abraços

  28. Newton de Góes HortaNo Gravatar disse:

    Apenas a título de ilustração: veja um exemplo prático da técnica tão bem explicada pelo Maurício (os ícones no rodapé do formulário são todos do tipo input type=” image”).

  29. Guilherme VerasNo Gravatar disse:

    Mais uma vez detonando …. excelente matéria …. :)

  30. TesteNo Gravatar disse:

    Que form mais legal.

  31. Renata MariaNo Gravatar disse:

    Gostaria de saber mais sobre como enviar um formulário para um banco de dados específico.

  32. ViniciusNo Gravatar disse:

    Mais este botão ai ele foi feito em qual programa?

    pois ali soh está a tag de inserir o código de submit, porém o botão é uma mera produção certo?

    eu estou no começo de HTML, bom..estou começando CSS…c alguem ai quiseh me ajuda, pois eu estou muito interessado em Web Design, porém acho q eu preciso estar ligado das “manhas” do HTML e CSS…ajudem me plz
    Eu espero me tornar Web Designer futuramente…=]

    Espero intender melhor todos estes códigoss
    =p

    Abraço

  33. RafaelNo Gravatar disse:

    Muito bom esse tutorial…há tempos queria saber como se faziam botões de formulários utilizando imagens. Aprendi facilmente, mas gostaria de efetuar o mesmo procedimento num botão de reset, ou seja, num botão para limpar os campos do form. Alguém poderia me ajudar?

  34. Bruno OliveiraNo Gravatar disse:

    Bom dia!, Gostaria apenas de saber se é possível remover de alguma forma os parametros X e Y enviados juntamente com o form (seja por get ou por post, porém, no meu caso é via GET). Grato pela atenção

  35. Raquel dos SantosNo Gravatar disse:

    Fiz um formulario no dremweaver, só que o botão enviar ao ser clicado ele enviar a informação para o meu outlook para depois enviar, tem como ser enviado diretamente sem que aconteça isso?
    me ajudem por favor…
    já agradeço … só falta isso para o meu site ficar pronto…

  36. UELITONNo Gravatar disse:

    Gente,

    Alguém pode me ajudar?
    Estou fazendo o meu questionário para terminar minha pós-graduação e o botão enviar não funciona.
    A página já está publicada, mas está dando pau só neste botão.
    http://www.webquali.com.br

    abs

  37. Eduardo FerreiraNo Gravatar disse:

    Olá, estou com uma dúvida fatal: já pus esse botão do tipo image mas ele não fica posicionado no lugar que eu quero. Existe alguma formatação para usar no botão input?

  38. BrásNo Gravatar disse:

    Gostaria de saber, qual a vantagem de um site estar totalmente validado no W3C ???
    Os buscadores melhoram a posição ??? o que tem de vantajoso pra internet isso ???
    abraços…

  39. Ana MariaNo Gravatar disse:

    Bruno – você conseguiu remover? Alguém sabe como fazer? Grata..

    Bom dia!, Gostaria apenas de saber se é possível remover de alguma forma os parametros X e Y enviados juntamente com o form (seja por get ou por post, porém, no meu caso é via GET). Grato pela atenção

  40. Fernando BinascoNo Gravatar disse:

    simples e direto ao assunto, gostei porque foi direto ao que eu queria saber. Obrigado

  41. lucasNo Gravatar disse:

    ^^

  42. RodolfoNo Gravatar disse:

    Olá, quando utilizado o input type=”image” com o método GET do form, é passado, além dos valores dos inputs, os valores X e Y. Existe a possibilidade evitar o envio desses dois valores.
    Grato.

  43. lucasNo Gravatar disse:

    Oi sou iniciante em css, gostaria de saber como posicionar o input type=submit fora de um form, sem javascript só com css. Por exemplo: na programação o submit está dentro do form. Mas na tela aparece aonde eu quiser. Tem como fazer isso com css?

  44. AugustoNo Gravatar disse:

    Olá, quando tento usar no meu input type=image no IE 7, ele simplesmente passa para a outra página sem enviar os dados. Estou utilizando php 5 e apache.

  45. DecioNo Gravatar disse:

    olá gente fazer o formulario eu tenho jeito só que enviar que eu não estou conseguindo…se alguem tiver uma dica pra me dar agradeço
    só dá oagina não acessada….

  46. AcompanhantesNo Gravatar disse:

    bom d+! valeu pela ajuda.

  47. AndréNo Gravatar disse:

    muito bom! salvou minha vida!

    obrigado!

  48. Diogo CrestaniNo Gravatar disse:

    Legal as dicas, foram muito úteis para mim…
    faço um convite para anunciar e trocar links com meus sites…

    http://www.ganhardinheiromais.com e http://www.anunciarsitenaweb.com

    abraço!

  49. RafaelNo Gravatar disse:

    E para apenas o texto ? Sem a caixa estilo botao com o texto ?

  50. FernandoNo Gravatar disse:

    Cara …. esse blog e o site são d+ !!!

    Obrigado por nos ajudar !!

  51. Franco AtiradorNo Gravatar disse:

    perfeito, fácil e rápido, obrigado

  52. FudêncioNo Gravatar disse:

    Maujor, boa noite.

    Sou autodidata e estou a aprender PHP, Javascript e CSS.
    Infelizmente já tentei de vários modos fazer rodar o código:
    background-image: url(image.jpg);
    e o gajo não funciona.
    Já pus em classes, sem classes, com identificadores, sem identificadores, dentro ou fora de div e nada.
    Até mesmo um código que peguei na sua página em que há um tutorial sobre layouts tudo funcionou exceto ele.
    O gajo só funciona diretamente na tag o que dificulta a manipulação, pois fica fora da tag .
    Você poderia dar-me uma reza ou milagre que me ajudasse a fazer com que ele funcionasse dentro da tag div?

    Desde já lhe agradeço.
    Parabéns pelo seu trabalho.
    Aliás, também tenho uma queixa.
    Já enviei dois mails para o pessoal da Novatec perguntando ONDE posso achar os seus livros aqui em Portugal e os gajos nada respondem.
    Poderia então você dizer-me onde posso por cá encontrá-los
    Grato

  53. VandersonNo Gravatar disse:

    Eu queria que vocês me ajudassem a me explicar como que eu faço para criar um formulario e estilizar separadamente o botão enviar e redefinir,ou seja,eu quero mudar o tamanho dos botões,a cor,enfim.Obrigado e um abraço bem grande:D

  54. priscilaNo Gravatar disse:

    Gostaria de mudar a cor do botão padrão para outra cor. Como faço?
    Eu uso dreamweaver cs5.5….

    Grata

  55. FerNo Gravatar disse:

    Excelente,não podia ter achado um artigo melhor…100%

  56. MasterNo Gravatar disse:

    Bom, uma dúvida em relação ao input tipo “file”.

    o problema é o seguinte, quando mudo o valor do tipo do input pra “image”, a funcionalidade file é desativada.

    Tem alguma forma, de mudar o visual do input, sem perder a sua funcionalidade?

    Desde já agradeço.

  57. JoaoNo Gravatar disse:

    Muito obrigado pelo código simples, mas de utilidade maravilhosa.
    Faz a diferença no design enlatado de hj em dia.
    Liberdade pra criar.
    Um bom dia.

Comentário:





Subscrição de comentários sem comentar

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

Voltar ao topo

PR Tool


ir topo