Personalize o botão ENVIAR do formulário
Publicado em: 2006-05-28 — 157.093 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 
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 elementoMETA).17.4.1 Tipos de controle criados com
INPUT
- O tipo de controle definido pelo elemento
INPUTdepende do valor do atributotype:- …………..
- image
Cria um submit button gráfico. O valor do atributo
srcespecifica 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 atributoalt.
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 https://www.maujor.com/blog/2006/05/28/botao-enviar-do-formulario/trackback no seu site.
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.
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.
Excelente,não podia ter achado um artigo melhor…100%
Gostaria de mudar a cor do botão padrão para outra cor. Como faço?
Eu uso dreamweaver cs5.5….
Grata
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
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
perfeito, fácil e rápido, obrigado
Cara …. esse blog e o site são d+ !!!
Obrigado por nos ajudar !!
E para apenas o texto ? Sem a caixa estilo botao com o texto ?
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!
muito bom! salvou minha vida!
obrigado!
bom d+! valeu pela ajuda.
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….
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.
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?
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.
^^
simples e direto ao assunto, gostei porque foi direto ao que eu queria saber. Obrigado
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
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…
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?
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
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…
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
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?
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
Gostaria de saber mais sobre como enviar um formulário para um banco de dados específico.
Que form mais legal.
Mais uma vez detonando …. excelente matéria …. 🙂
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”).
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
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.
@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!
@Marco:
Há uma frase que diz:
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,Ique são meramente para apresentação.O que vocês acham de
:hovere: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.
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
brouhr, 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.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!!
@Marco:
O W3C normatiza um botão
type:imagee 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” … / >
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
Com o uso de JavaScript é possivel criar inumeros efeitos vizuais, como alterar a propriedade
src=""de um elementoinput type=imageno 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….?
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?
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…
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:
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.
Interessante o teu botão enviar Marcos, consegue fazer um assim mas com a beleza de um botão água?
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.
Bem legal o efeito!!!
Ah, em tempo…. obrigado!
@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…
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 =]….
Eu tinha conhecimento disto, mas é sempre bom ler algo e os comentários também são de grande valia para todos.
Abraços
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”?
Muito boa matéria… só pra variar!
@Cleyton:
Com CSS você pode usar o seletor
input:hoverpara 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
srcdeinputvia CSS.Atenção: O IE não suporta
:hover.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…
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!.. =]
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
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… 😉
Muito bom, da para estilizar o formulário do nosso jeito.. CSS é uma maravilha 🙂