Unterschied zwischen <input type = 'button' /> und <input type = 'submit' />

Es gibt keine dumme Frage, also los geht's: Was ist der Unterschied zwischen <input type='button' />und <input type='submit' />?

<input type="button" />Schaltflächen senden kein Formular - sie tun standardmäßig nichts. Sie werden im Allgemeinen in Verbindung mit JavaScript als Teil einer AJAX-Anwendung verwendet.

<input type="submit"> Schaltflächen senden das Formular, in dem sie sich befinden, wenn der Benutzer darauf klickt, sofern Sie mit JavaScript nichts anderes angeben.

Eine 'Schaltfläche' ist genau das, eine Schaltfläche, zu der Sie mithilfe von Javascript zusätzliche Funktionen hinzufügen können. Ein Eingabetyp "Senden" verfügt über die Standardfunktionalität zum Senden des Formulars, in dem er platziert ist (obwohl Sie mit Javascript natürlich noch zusätzliche Funktionen hinzufügen können).

Die Schaltfläche sendet kein Formular selbst. Es handelt sich um eine einfache Schaltfläche, mit der einige Vorgänge mithilfe von Javascript ausgeführt werden, während das Senden eine Art Schaltfläche ist, mit der das Formular standardmäßig gesendet wird, wenn der Benutzer auf die Schaltfläche "Senden" klickt.

IE 8 verwendet tatsächlich die erste Schaltfläche, auf die Submit oder Button stößt. Anstatt einfach anzugeben, was gewünscht wird, indem es zu einem Eingabetyp gemacht wird = Senden, ist die Reihenfolge auf der Seite tatsächlich von Bedeutung.

Es sollte auch erwähnt werden, dass eine benannte Eingabe vom Typ = "submit" auch zusammen mit den benannten Feldern des anderen Formulars gesendet wird, während eine benannte Eingabe type = "button" dies nicht tut.

Mit anderen Worten, im folgenden Beispiel wird die benannte Eingabe name=button1 NICHT gesendet , während die benannte Eingabe name=submit1 gesendet wird .

Beispiel-HTML-Formular (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>

Das PHP-Skript (checkout.php), das die Aktion des obigen Formulars verarbeitet:

<?php var_dump($_POST); ?>

Testen Sie die oben genannten Schritte auf Ihrem lokalen Computer, indem Sie die beiden Dateien in einem Ordner mit dem Namen / tmp / test / erstellen und dann den integrierten PHP-Webserver über die Shell ausführen:

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

Öffnen Sie Ihren Browser unter http: // localhost: 3000 und überzeugen Sie sich selbst.

Man würde sich fragen, warum wir einen benannten Button einreichen müssen? Dies hängt vom Back-End-Skript ab. Beispielsweise verarbeitet das WooCommerce WordPress-Plugin eine veröffentlichte Checkout-Seite nur, wenn auch die angegebene Place OrderSchaltfläche gesendet wird. Wenn Sie den Typ von " Senden an" auf " Schaltfläche" ändern, wird diese Schaltfläche nicht gesendet und das Checkout-Formular wird daher nie verarbeitet.

Dies ist wahrscheinlich ein kleines Detail, aber Sie wissen, der Teufel steckt im Detail.

<input type="button">kann überall verwendet werden, nicht nur innerhalb des Formulars, und sie senden kein Formular, wenn sie sich in einem befinden. Viel besser geeignet mit Javascript.

<input type="submit">sollte nur in Formularen verwendet werden und sie senden eine Anfrage (entweder GET oder POST) an die angegebene URL. Sie sollten nicht an einer HTML-Stelle abgelegt werden.

W3C macht dies anhand der Spezifikation des Button-Elements deutlich

Button kann als generische Klasse für alle Arten von Buttons ohne Standardverhalten angesehen werden.

W3C

type='Submit'ist so eingestellt, dass die Werte auf BACK-END (PHP, .NET usw.) weitergeleitet und abgerufen werden. type='button'spiegelt das normale Tastenverhalten wider.