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

223

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

bounav
quelle
2
Das HTML <button> -Element sendet kein eigenes Formular, Kumpel ...
Hexagon Theory
6
Tatsächlich ist dies in einigen Browsern der Fall. Wenn Sie ein Formular ohne Submit-Button, sondern mit einem <Button> haben, wird die Submit-Funktionalität darauf angewendet. Firefox hat dieses Verhalten.
Jishi
Beim Lesen der W3C-Spezifikation ist dies tatsächlich das Standardverhalten, da Schaltflächen ein Typattribut haben, das standardmäßig "Senden" lautet.
Jishi
37
Ich hatte die gleiche Frage und dies ist definitiv keine dumme Frage, besonders wenn Sie Ihr ganzes Leben lang ein Entwickler von asp.net-Webformularen waren, bei dem wir nicht jeden Tag reguläres HTML verwenden, weil die dummen asp.net-Steuerelemente diese Scheiße ausspucken für uns ... deshalb sind wir dumm, wenn wir zu MVC wechseln und zurück in den Kindergarten müssen, um herauszufinden, wie man einfache Formularelemente wieder codiert. :)
PositiveGuy

Antworten:

235

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


quelle
42
Browser können auch den Tastendruck "Enter" in einem Formular erfassen und das Formular automatisch senden, wenn eine Schaltfläche zum Senden vorhanden ist, aber nicht anders.
Mr. Shiny und New
2
Sie tun dies auch, wenn Sie einen Typ = "Bild" haben, mit dem beim Klicken eine Formularübermittlung ausgelöst werden kann.
jishi
5
Mr. Shiny und New: Formulare können über die Eingabetaste ohne Schaltflächen gesendet werden. Es reicht zum Beispiel aus, sich auf eine Texteingabe zu konzentrieren.
Lasar
3
Sie können BUTTON-Elemente verwenden, obwohl (überraschend überraschend) einige Probleme mit ihnen auftreten, wenn Sie den Lieblingsbrowser (IE) von Jedermann verwenden. Wissenswert.
4
Dies ist offensichtlich extrem alt, aber ich habe das Bedürfnis, meine 2 Cent zu geben, da ich der Meinung bin, dass die Verwendung von Schaltflächentypen einen großen Nachteil darstellt. Das Ereignis zum Einreichen von Formularen wird NICHT von Javascript-Einsendungen ausgelöst, was zu potenziellen Wartungs-Albträumen führt.
Mothmonsterman
20

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

Aistina
quelle
7

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.

Sujeet Srivastava
quelle
3

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.

Martin Murphy
quelle
3

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.

Eugen Mihailescu
quelle
Entspricht dies der Spezifikation oder ist es browserabhängig?
Magnus Lind Oxlund
0

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


quelle
0

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

Mahfoud Boukert
quelle
0

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.

Shashank Malviya
quelle