Personalize o botão ENVIAR do formulário
Publicado em: 2006-05-28 — 18,944 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.
Adicionar esta matéria os favoritos no seu navegador
Ask
backflip
blinklist
BlogBookmark
Bloglines
BlogMarks
Blogsvine
BUMPzee!
CiteULike
co.mments
Connotea
del.icio.us
DotNetKicks
Digg
diigo
dropjack.com
dzone
Facebook
Fark
Faves
Feed Me Links
Friendsite
folkd.com
Furl
Google
Hugg
Jeqq
Kaboodle
linkaGoGo
LinksMarker
Ma.gnolia
Mister Wong
Mixx
MySpace
MyWeb
Netvouz
Newsvine
PlugIM
popcurrent
Propeller
Reddit
Rojo
Segnalo
Shoutwire
Simpy
sk*rt
Slashdot
Sphere
Sphinn
Spurl.net
Squidoo
StumbleUpon
Technorati
ThisNext
Webride
Windows Live
Yahoo!
Assinar 
(Post ainda não avaliado)
Loading ...----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Esta matéria foi publicada em: 2006-05-28 (Sunday). 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.
Muito bom, da para estilizar o formulário do nosso jeito.. CSS é uma maravilha
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 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
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!.. =]
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…
@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.Muito boa matéria… só pra variar!
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”?
Eu tinha conhecimento disto, mas é sempre bom ler algo e os comentários também são de grande valia para todos.
Abraços
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 =]….
@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…
Ah, em tempo…. obrigado!
Bem legal o efeito!!!
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.
Interessante o teu botão enviar Marcos, consegue fazer um assim mas com a beleza de um botão água?
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.
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…
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?
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….?
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
@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” … / >
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!!
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.@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.
@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!
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.
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
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”).
Mais uma vez detonando …. excelente matéria ….
Que form mais legal.
Gostaria de saber mais sobre como enviar um formulário para um banco de dados específico.
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
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?
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
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…
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
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?
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…
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
simples e direto ao assunto, gostei porque foi direto ao que eu queria saber. Obrigado
^^
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.