Submit ou Button?

Front-end

24/09/2015

No 
<input type="" />
utiliza-se o submit, mas tambem existe uma opção chamada button, existe diferença, alguma dessas tags estão entrando em desuso?
Marluce Neves

Marluce Neves

Curtidas 0

Respostas

Marcelo Pastore

Marcelo Pastore

24/09/2015

Olá Marluce, a diferença não é tanta.

[url]http://softwarelivre.org/dojo-toolkit/blog/diferencas-entre-tags-button-e-input-com-type-button[/url]
GOSTEI 0
Marluce Neves

Marluce Neves

24/09/2015

Mas o normal é utilizar o submit não é? Minha pergunta se basea pelo que vejo, nos código.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

24/09/2015

Eu utilizo, mas leia as dicas, tem maiores detalhes.
GOSTEI 0
Marluce Neves

Marluce Neves

24/09/2015

Ta certo Marcelo, obrigada.
GOSTEI 0
Jothaz

Jothaz

24/09/2015

É bem diferente usar o "submit" ou utilizar um "button".

Quando você cria um "submit" como no exemplo abaixo:

<form action="action_page.php">
  First name:<br>
  <input type="text" id="nome" value="Mequetrefe">
  <br>
  <input type="submit" id="enviar" value="Enviar">
</form>


Você esta dizendo para a página que ao clicar no botão de noem "enviar" é para executar o action "action_page.php" do form. Então seria uma forma implicita de executar um ação, no caso uma página php. Se você definir um "submit" e não definir uma action não vai ocorre nada. Outro detalhe o submit é atrelado a action do form então só vai rodar aquela action.

Ao criar um button e definir um uma ação no evento onclick você arbtrariamente rodará o uma função qualquer que esteja definida na sua página. Veja o exemplo:

<form action="action_page.php" id="form1">
  First name:<br>
  <input type="text" id="nome" value="Mequetrefe">
  <br>
  <button type="button" id="enviar" onclick="enviar()">Envia</button>
  <br>
  <button type="button" id="modal" onclick="modal()">Modal</button>
  <br>
  <button type="button" id="detalha" onclick="detalha()">Detlhar</button>  
</form>

<script>
	function enviar()
	{
		document.form1.action = "chama_pagina-diferente-da-action-original.php"
	]
	
	function modal()
	{
		//Aqui função para exibir modal
	]

	function detalha()
	{
		//Aqui função para detlhar, por exemplo
	]	
</script>


No exemplo acima apesar de existir um action definido para o form, foi definido no botão "enviar" a execução de uma função que altera o action do form e roda abre um página definida nesta nova action. Note que mesmo existindo um action definido para o form ele não vai ser executado, pois não é chamada nem existe um botão submit.

Botão do tipo submit sempre vai executar o action do form, botões comuns executa uma função definida no evento onclick.
GOSTEI 0
Marluce Neves

Marluce Neves

24/09/2015

A principio estou apenas aprendendo o form no HTML, é apenas um "esqueleto" de uma funcionalidade que vai alem dessa linguagem de marcação, correto, isso vou deixar para depois, mas estou estudando ainda.
GOSTEI 0
Jothaz

Jothaz

24/09/2015

O action pode chamar qualquer tipo de página com conteúdo html, que poderia ser gerada em qualquer linguagem ou em HTML estárico. Pode ser algo assim:

<form action="minha-pagina.html" id="form1">
GOSTEI 0
Marluce Neves

Marluce Neves

24/09/2015

Como se fosse um link? Agora "puxou" outro assunto, link ou action? faz sentido essa minha pergunta?
GOSTEI 0
Jothaz

Jothaz

24/09/2015

Pode-se se dizer que teria a mesma função, mas o escopo é diferente.

Tanto o action como o link (<a href..>) vão redirecionar para a página indicada, só que o action é exclusivo para ser usado/atribuido a formulário e o link é um controle especifico que pode ser utilizado em qualquer parte da página inclusive dentro de um formulário.

Outro detalhe importantíssimo é que o action submete (envia) o formulário e você pode recuperar os campos, usando um linguagem back-end, em outra página através de "request.form" e manipulá-los de acordo com sua necessidade. No caos do link não é passado/submetido os campos do formulário.

Porém pode-se passar parâmetros via link e recuperá-los através de "requst.querystring", via linguagem back-end e usá-los de acordo com a necessidade. Veja um exemplo de um link passando parâmetros:

<a href="minha-pagina.aspx?nome=Marluce"  />


No caso é chamada uma página "minha-pagina.aspx" e é passado um parâmetro "nome" com o valor "Marluce" que pode ser recuperado e usado.

Não vou-me estender, pois sem conhecer uma linguagem back-end fica um pouco difícil abstrair o conceito. Com HTML puro não é possível manipular o objeto Request.
GOSTEI 0
Marluce Neves

Marluce Neves

24/09/2015

Tudo bem Jothaz, é melhor não estender mesmo, está OK!
GOSTEI 0
Rafael Jeck

Rafael Jeck

24/09/2015

pessoal se pudessem me ajudar estou com problemas em instanciar um botao consulta para ir a uma pagina que tem todos os dados no caso consulta no meu banco de dados alguem poderia me ajudar
GOSTEI 0
POSTAR