Dúvida sobre <form> + HTML

[*DuDu_SCS*]

Opa pessoal, como sou meio noob ainda estou tendo algumas dificuldades, e espero que alguém possa me ajudar.

É o seguinte, acho que muitos passaram por algo parecido, mas gostaria de utilizar uma imagem como submit de um form, ou seja, ao invés de utilizaro o <input type="submit" /> que cria um botão padrão, queria utilizar uma imagem.

a principio eu estava testando com type="image" e dando o caminho da imagem, e no teste de envio, ele enviava a informação, porém junto enviava alguma coisa extra da imagem, sendo visível através do "get" do form.

mais especificamente, com o submit o código era o seguinte:

FirstName=Primeiro&LastName=Segundo

e com imagem:

FirstName=Primeiro&LastName=Segundo&btn_busca.x=20&btn_busca.y=25

parece ser coordenadas de onde foi clicado na imagem.

mas enfim, esse código extra é desprezível, devido ao servidor (ou arquivo php, não sei) não fazer uso do mesmo pois não está sendo requirido no código do banco de dados/php?


era isso, vlw

 

[André_F]

Esse código extra que ele passa é desprezível, só vai usar se você requisitar ele no php destino.

Já considerou em passar o form via POST e não via GET? Daí não aparece nada na URL.

Mas caso queira MESMO passar via GET e não queira que apareça os dados da imagem na URL, dá pra usar javascript. Primeiro você precisa dar um nome pro seu form (<form name="meuForm" ....>) e depois voce pode submeter ele com qualquer elemento, no caso uma imagem (<img src="imagem.png" onclick="meuForm.submit()" ....>). Se não me engano desse jeito deve funcionar.

 

[*DuDu_SCS*]

Esse código extra que ele passa é desprezível, só vai usar se você requisitar ele no php destino.

Já considerou em passar o form via POST e não via GET? Daí não aparece nada na URL.

Mas caso queira MESMO passar via GET e não queira que apareça os dados da imagem na URL, dá pra usar javascript. Primeiro você precisa dar um nome pro seu form (<form name="meuForm" ....>) e depois voce pode submeter ele com qualquer elemento, no caso uma imagem (<img src="imagem.png" onclick="meuForm.submit()" ....>). Se não me engano desse jeito deve funcionar.

Opa cara, obrigado pela resposta.

Mas então, eu coloquei como GET somente para teste mesmo para ver o que era enviado, pois estou aprendendo sobre PHP e MySQL no momento, e ai bateu essa dúvida sobre o form.

Obrigado pelo esclarecimento.

 

[André_F]

Opa cara, obrigado pela resposta.

Mas então, eu coloquei como GET somente para teste mesmo para ver o que era enviado, pois estou aprendendo sobre PHP e MySQL no momento, e ai bateu essa dúvida sobre o form.

Obrigado pelo esclarecimento.

Se quiser também da pra ver o que é enviado pelo POST. No .php de destino é só colocar um var_dump($_POST) que ele mostra tudo que é passado (variáveis, tipo de variável, tamanho, etc). É bem mais completo e fica bem mais organizado (na página pode parecer bagunçado, mas veja no código fonte dá pagina destino e vai tar tudo tabulado).

Não sei qual teu nível de aprendizado, mas eu comecei aprendendo por aqui ó:
http://forum.wmonline.com.br/topic/104421-tutorial-php-iniciante/
http://forum.wmonline.com.br/topic/103227-iniciando-no-mysql/

Outra fonte de conhecimento muito boa é o próprio manual online do php (php.net), lá tem muita coisa boa, vale a pena dar uma olhada.

 

[*DuDu_SCS*]

Se quiser também da pra ver o que é enviado pelo POST. No .php de destino é só colocar um var_dump($_POST) que ele mostra tudo que é passado (variáveis, tipo de variável, tamanho, etc). É bem mais completo e fica bem mais organizado (na página pode parecer bagunçado, mas veja no código fonte dá pagina destino e vai tar tudo tabulado).

Não sei qual teu nível de aprendizado, mas eu comecei aprendendo por aqui ó:
http://forum.wmonline.com.br/topic/104421-tutorial-php-iniciante/
http://forum.wmonline.com.br/topic/103227-iniciando-no-mysql/

Outra fonte de conhecimento muito boa é o próprio manual online do php (php.net), lá tem muita coisa boa, vale a pena dar uma olhada.

Bah, gostei dos links, agora que pego o jeito da coisa!

 

[fabricionaweb]

Pode usar CSS pra inserir a imagem no input[type="submit"]

Seria algo mais ou menos assim

http://codepen.io/fabricionaweb/pen/sbezg

usei uma imagem qualquer do botão...

 

[*DuDu_SCS*]

Pode usar CSS pra inserir a imagem no input[type="submit"]

Seria algo mais ou menos assim

http://codepen.io/fabricionaweb/pen/sbezg

usei uma imagem qualquer do botão...

Legal, é uma boa opção também

 

[*DuDu_SCS*]

O pessoal, to com outra dúvida aqui. Como que vocês fazem para centralizar uma imagem ou elemento verticalmente?
Com áreas com tamanho definido eu utilizo margem e fica tranquilo, mas com, por exemplo, uma div com altura variável, ai já não sei como proceder

 

[fabricionaweb]

O pessoal, to com outra dúvida aqui. Como que vocês fazem para centralizar uma imagem ou elemento verticalmente?
Com áreas com tamanho definido eu utilizo margem e fica tranquilo, mas com, por exemplo, uma div com altura variável, ai já não sei como proceder

Alinhar verticalmente é um problema muito comum! Isso nunca é resolvido direito...
Se tiver altura fixa, a melhor forma é controlar com position e margin negativa.
As vezes voce pode controlar com display table/table-cell dependendo do conteudo...
Mas as vezes só o malvado javascript pra resolver...

 

[André_F]

O pessoal, to com outra dúvida aqui. Como que vocês fazem para centralizar uma imagem ou elemento verticalmente?
Com áreas com tamanho definido eu utilizo margem e fica tranquilo, mas com, por exemplo, uma div com altura variável, ai já não sei como proceder

Alinhas coisas de tamanho indefinido é sempre uma treta. Pra tamanhos definidos dá pra trabalhar com o line-height. Uma solução rápida pra divs com altura variável é usar "display: table-cell", mas aí acaba estragando outras coisas Se não me engano quando você tem divs lado a lado e usa o table-cell, uma quebra de linha no código fonte faz aparecer um espaço entre as divs laterais. Nossa, uma confusão sem fim, vai arrumando aqui, estragando ali.

Mas enfim, já passei por isso e tinha esses artigos favoritados aqui:

• http://gtwebdev.com/workshop/vcenter/vcenter-inline-css.php
• http://css-tricks.com/centering-in-the-unknown/

Também da uma procurada no stackoverflow.com, lá tem bastante dúvida esclarecida

• http://stackoverflow.com/questions/...ter-content-with-variable-height-within-a-div
• http://stackoverflow.com/questions/8226208/vertically-center-content-within-a-div-of-dynamic-height

 

[*DuDu_SCS*]

POis é, o line-height já é um bom conhecido meu, uso em muitos casos, principalmente em menus.
Table-cell também conheço, mas não utilizava devido ao maldito IE ser o único que não funcionava a pouco tempo atrás, e tentei a pouco mas não deu certo.

 

[André_F]

POis é, o line-height já é um bom conhecido meu, uso em muitos casos, principalmente em menus.
Table-cell também conheço, mas não utilizava devido ao maldito IE ser o único que não funcionava a pouco tempo atrás, e tentei a pouco mas não deu certo.

Acho que table-cell só funciona em IE8 e superior. Mas né? Quem usa IE7 (ou anterior) nem merece entrar no site :seferrou:

 

[*DuDu_SCS*]

Acho que table-cell só funciona em IE8 e superior. Mas né? Quem usa IE7 (ou anterior) nem merece entrar no site :seferrou:

:seferrou::seferrou:

A mais pura verdade. Mas se você desenvolver em HTML5 + CSS3, coisa que estou fazendo, não tem mesmo como pensar em quem utiliza algum navegador antigo.
Coloquei o table-cell pra funcionar aqui e vai ficar, antes não funcionou por que utilizei um float na mesma div, ai dava erro

 

[StRuPs]

Só para registrar, é possível usar uma imagem como botão submit usando a tag input, desta forma:

<input type="image" src="enviar.png" alt="Enviar" />

Funcional igual e é HTML válido (http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1).