Différence entre <input type = 'button' /> et <input type = 'submit' />

Il n'y a pas de question stupide, alors allons-y: Quelle est la différence entre <input type='button' />et <input type='submit' />?

<input type="button" />les boutons ne soumettront pas de formulaire - ils ne font rien par défaut. Ils sont généralement utilisés en conjonction avec JavaScript dans le cadre d'une application AJAX.

<input type="submit"> les boutons soumettront le formulaire dans lequel ils se trouvent lorsque l'utilisateur clique dessus, sauf indication contraire avec JavaScript.

Un «bouton» est juste cela, un bouton, auquel vous pouvez ajouter des fonctionnalités supplémentaires en utilisant Javascript. Un type d'entrée «soumettre» a la fonctionnalité par défaut de soumettre le formulaire dans lequel il est placé (bien sûr, vous pouvez toujours ajouter des fonctionnalités supplémentaires en utilisant Javascript).

Le bouton ne soumettra pas le formulaire de lui-même.C'est un simple bouton qui est utilisé pour effectuer certaines opérations en utilisant javascript tandis que Soumettre est une sorte de bouton qui soumet le formulaire par défaut chaque fois que l'utilisateur clique sur le bouton Soumettre.

IE 8 utilise en fait le premier bouton qu'il rencontre soumettre ou bouton. Au lieu d'indiquer facilement ce qui est souhaité en en faisant un type d'entrée = soumettre la commande sur la page est réellement significative.

Il convient également de mentionner qu'une entrée nommée de type = "submit" sera également soumise avec les champs nommés de l'autre formulaire alors qu'une entrée nommée type = "button" ne le sera pas.

En d'autres termes, dans l'exemple ci-dessous, l'entrée nommée name=button1 NE SERA PAS soumise tandis que l'entrée nommée name=submit1 SERA soumise.

Exemple de formulaire 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>

Le script PHP (checkout.php) qui traite l'action du formulaire ci-dessus:

<?php var_dump($_POST); ?>

Testez ce qui précède sur votre machine locale en créant les deux fichiers dans un dossier nommé / tmp / test / puis en exécutant le serveur Web PHP intégré à partir du shell:

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

Ouvrez votre navigateur sur http: // localhost: 3000 et voyez par vous-même.

On se demanderait pourquoi devrions-nous soumettre un bouton nommé? Cela dépend du script principal. Par exemple, le plugin WooCommerce WordPress ne traitera pas une page de paiement publiée sauf si le Place Orderbouton nommé est également soumis. Si vous modifiez son type de soumettre à bouton, ce bouton ne sera pas soumis et le formulaire de paiement ne sera donc jamais traité.

C'est probablement un petit détail mais vous savez, le diable est dans les détails.

<input type="button">peuvent être utilisés n'importe où, pas seulement dans le formulaire et ils ne soumettent pas de formulaire s'ils sont dans un. Beaucoup mieux adapté avec Javascript.

<input type="submit">doivent être utilisés uniquement dans les formulaires et ils enverront une demande (GET ou POST) à l'URL spécifiée. Ils ne doivent être placés dans aucun emplacement HTML.

Le W3C précise, sur la spécification de l'élément Button

Le bouton peut être considéré comme une classe générique pour tous les types de boutons sans comportement par défaut.

W3C

type='Submit'est défini pour transmettre et obtenir les valeurs sur BACK-END (PHP, .NET, etc.). type='button'reflétera le comportement normal des boutons.