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

Publicado em: 2006-05-28 — 156.774 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.

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

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

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

  3. FerNo Gravatar disse:

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

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

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

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

  7. Franco AtiradorNo Gravatar disse:

    perfeito, fácil e rápido, obrigado

  8. FernandoNo Gravatar disse:

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

    Obrigado por nos ajudar !!

  9. RafaelNo Gravatar disse:

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

  10. 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!

  11. AndréNo Gravatar disse:

    muito bom! salvou minha vida!

    obrigado!

  12. AcompanhantesNo Gravatar disse:

    bom d+! valeu pela ajuda.

  13. 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….

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

  15. 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?

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

  17. lucasNo Gravatar disse:

    ^^

  18. Fernando BinascoNo Gravatar disse:

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

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

  20. 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…

  21. 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?

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

  23. 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…

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

  25. 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?

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

  27. Renata MariaNo Gravatar disse:

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

  28. TesteNo Gravatar disse:

    Que form mais legal.

  29. Guilherme VerasNo Gravatar disse:

    Mais uma vez detonando …. excelente matéria …. 🙂

  30. 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”).

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

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

  33. 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!

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

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

  36. 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!!

  37. 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” … / >

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

  39. 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….?

  40. 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?

  41. 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…

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

  43. Claudio RodriguesNo Gravatar disse:

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

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

  45. Pedro RogérioNo Gravatar disse:

    Bem legal o efeito!!!

  46. Cláudio RodriguesNo Gravatar disse:

    Ah, em tempo…. obrigado!

  47. 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…

  48. 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 =]….

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

  50. 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”?

  51. JoaresNo Gravatar disse:

    Muito boa matéria… só pra variar!

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

  53. 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…

  54. 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!.. =]

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

  56. 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… 😉

  57. Erik MarquesNo Gravatar disse:

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

Comentário:





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

Subscribe without commenting

topo