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

223

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

html input types bounav
la source
2
L'élément HTML <button> ne soumet pas de formulaire par lui-même, mate ...
Hexagon Theory
6
En fait, c'est le cas dans certains navigateurs. Avoir un formulaire, sans bouton soumettre mais à la place un <bouton> lui appliquera la fonctionnalité soumettre. Firefox a ce comportement.
jishi
Lors de la lecture des spécifications W3C, il s'agit en fait d'un comportement par défaut, car les boutons ont un attribut de type qui est par défaut "soumettre".
jishi
2
Voir aussi input type = "submit" Vs bouton tag sont-ils interchangeables?
hippietrail
37
J'avais la même question et ce n'est certainement pas une question stupide, surtout si vous avez été un développeur de formulaires Web asp.net toute votre vie où nous n'utilisons pas le html normal le jour parce que les stupides contrôles asp.net crachent cette merde pour nous ... c'est pourquoi nous finissons par être stupides lorsque nous passons à MVC et que nous devons retourner au jardin d'enfants pour comprendre comment coder à nouveau des éléments de formulaire simples. :)
PositiveGuy

Réponses:

235

<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.


la source
42
Les navigateurs peuvent également capturer la touche "Entrée" sur un formulaire et soumettre le formulaire automatiquement s'il y a un bouton de soumission, mais pas autrement.
M. Shiny et New 安 宇
2
Ils le font également si vous avez un type = "image", qui peut être utilisé pour déclencher une soumission de formulaire lorsque vous cliquez dessus.
jishi
5
M. Shiny et New: Les formulaires peuvent être soumis via la touche Entrée sans aucun bouton. Il suffit de se concentrer sur une entrée de texte, par exemple.
Lasar
3
Vous pouvez utiliser des éléments BUTTON, bien que (surprise surprise) il y ait quelques problèmes avec eux lors de l'utilisation du navigateur favori de tout le monde (IE). À savoir cependant.
4
C'est évidemment extrêmement ancien, mais je ressens le besoin de donner mes 2 cents car je pense que c'est une grosse chute de l'utilisation des types de boutons ...
mothmonsterman
20

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).

Aistina
la source
7

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.

Sujeet Srivastava
la source
3

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.

Martin Murphy
la source
3

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.

Eugen Mihailescu
la source
Est-ce conforme aux spécifications ou dépend-il du navigateur?
Magnus Lind Oxlund du
0

<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.


la source
0

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

Mahfoud Boukert
la source
0

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.

Shashank Malviya
la source