Diferença entre <input type = 'button' /> e <input type = 'submit' />

223

Não existe uma pergunta estúpida, então vamos lá: Qual é a diferença entre <input type='button' />e <input type='submit' />?

html input types

— bounav
fonte

2

O elemento <button> HTML não enviar um formulário por conta própria, companheiro ...

— Hexagon Theory

6

Na verdade, isso ocorre em alguns navegadores. Tendo um formulário, sem um botão de envio, mas um <botão> aplicará a funcionalidade de envio a ele. O Firefox tem esse comportamento.

— 217 jishi

Ao ler as especificações do W3C, esse é realmente o comportamento padrão, pois os botões possuem um atributo de tipo cujo padrão é "enviar".

— 217 jishi

2

Veja também input type = "submit" Vs tag tag são intercambiáveis?

— Hippietrail 23/11

37

Eu tive a mesma pergunta e essa definitivamente não é uma pergunta estúpida, especialmente se você foi desenvolvedor de formulários da web asp.net por toda a sua vida, onde não usamos html regular muito dia porque os controles estúpidos do asp.net cospem essa merda para nós ... é por isso que acabamos sendo burros ao mudar para o MVC e ter que voltar ao jardim de infância para descobrir como codificar elementos simples de formulário novamente. :)

— PositiveGuy

235

<input type="button" />Os botões não enviarão um formulário - eles não fazem nada por padrão. Eles geralmente são usados em conjunto com JavaScript como parte de um aplicativo AJAX.

<input type="submit"> Os botões enviarão o formulário em que estão quando o usuário clicar neles, a menos que você especifique o contrário com JavaScript.

42

Os navegadores também podem capturar a tecla "Enter" em um formulário e enviá-lo automaticamente se houver um botão de envio, mas não o contrário.

— Mr. Shiny and New

2

Eles também fazem isso se você tiver um type = "image", que pode ser usado para acionar o envio de um formulário quando clicado.

— 226 jishi

5

Sr. Brilhante e Novo: Os formulários podem ser enviados através da tecla Enter sem nenhum botão. É o suficiente para se concentrar em uma entrada de texto, por exemplo.

— Lasar

3

Você pode usar elementos BUTTON, embora (surpresa surpresa) existam alguns problemas ao usar o Navegador favorito de todos (IE). Vale a pena conhecer.

4

Isso é obviamente extremamente antigo, mas sinto a necessidade de dar meus 2 centavos, pois sinto uma grande queda no uso de tipos de botão ... o evento de envio de formulário NÃO é acionado a partir de envios de javascript, levando a possíveis pesadelos de manutenção.

— Mothmonsterman

20

Um 'botão' é apenas isso, um botão, ao qual você pode adicionar funcionalidades adicionais usando Javascript. Um tipo de entrada 'enviar' tem a funcionalidade padrão de enviar o formulário em que ele foi inserido (embora, é claro, você ainda possa adicionar funcionalidades adicionais usando Javascript).

— Aistina
fonte

7

O botão não envia o formulário sozinho. É um botão simples usado para executar alguma operação usando javascript, enquanto o Submit é um tipo de botão que, por padrão, envia o formulário sempre que o usuário clica no botão Enviar.

— Sujeet Srivastava
fonte

3

O IE 8, na verdade, usa o primeiro botão encontrado ou o botão enviar. Em vez de indicar facilmente o que é desejado, tornando-o um tipo de entrada = enviar o pedido na página é realmente significativo.

— Martin Murphy
fonte

3

Também deve ser mencionado que uma entrada nomeada de type = "submit" também será enviada juntamente com os campos nomeados do outro formulário, enquanto uma entrada nomeada de type = "button" não será.

Com outras palavras, no exemplo abaixo, a entrada nomeada name=button1 NÃO será enviada enquanto a entrada nomeada name=submit1 será enviada.

Exemplo de formulário HTML (index.html):

<form action="checkout.php" method="POST">

  <!-- this won't get submitted despite being named -->
  <input type="button" name="button1" value="a button">

  <!-- this one does; so the input's TYPE is important! -->
  <input type="submit" name="submit1" value="a submit button">

</form>

O script PHP (checkout.php) que processa a ação do formulário acima:

<?php var_dump($_POST); ?>

Teste o acima em sua máquina local criando os dois arquivos em uma pasta chamada / tmp / test / e executando o servidor da Web PHP embutido no shell:

php -S localhost:3000 -t /tmp/test/

Abra seu navegador em http: // localhost: 3000 e veja por si mesmo.

Alguém poderia se perguntar por que precisamos enviar um botão nomeado? Depende do script de back-end. Por exemplo, o plug-in WooCommerce WordPress não processará uma página do Google Checkout, a menos que o Place Orderbotão nomeado também seja enviado. Se você alterar o tipo de enviar para o botão , esse botão não será enviado e, portanto, o formulário do Google Checkout nunca será processado.

Provavelmente este é um pequeno detalhe, mas você sabe, o diabo está nos detalhes.

— Eugen Mihailescu
fonte

Isso está de acordo com as especificações ou depende do navegador?

— Magnus Lind Oxlund 10/10

0

<input type="button">pode ser usado em qualquer lugar, não apenas no formulário e eles não enviam o formulário se estiverem em um. Muito mais adequado Javascript.

<input type="submit">deve ser usado apenas em formulários e eles enviarão uma solicitação (GET ou POST) para o URL especificado. Eles não devem ser colocados em nenhum local HTML.

0

O W3C deixa claro, na especificação sobre o elemento Button

O botão pode ser visto como uma classe genérica para todos os tipos de botões sem comportamento padrão.

W3C

— Mahfoud Boukert
fonte

0

type='Submit'está definido para encaminhar e obter os valores em BACK-END (PHP, .NET etc.). type='button'refletirá o comportamento normal do botão.

— Shashank Malviya
fonte