input type = "submit" Vs button tag sind sie austauschbar?

http://www.w3.org/TR/html4/interact/forms.html#h-17.5

Mit dem BUTTON-Element erstellte Schaltflächen funktionieren genauso wie mit dem INPUT-Element erstellte Schaltflächen, bieten jedoch umfassendere Rendering-Möglichkeiten: Das BUTTON-Element verfügt möglicherweise über Inhalt. Beispielsweise funktioniert ein BUTTON-Element, das ein Bild enthält, wie ein INPUT-Element und ähnelt diesem, dessen Typ auf "image" festgelegt ist, der BUTTON-Elementtyp lässt jedoch Inhalt zu.

Sie sind also nur für die Funktionalität austauschbar!

(Vergiss nicht, type="submit" ist die Standardeinstellung mit button, also lass es aus!)

Das <input type="button"> ist nur ein Knopf und macht nichts für sich. Das <input type="submit"> sendet das Formular in einem Formularelement, wenn darauf geklickt wird.

Ein weiterer nützlicher "spezieller" Knopf ist der <input type="reset"> das wird das Formular löschen.

Verwenden Sie das Tag <button> anstelle von <input type = "button" ..> . Es wird empfohlen, bootstrap 3.

http://getbootstrap.com/css/#buttons-tags

"Browserübergreifendes Rendering

Als bewährte Methode wird dringend empfohlen, das Element <button> zu verwenden, wenn dies möglich ist, um eine Übereinstimmung mit dem browserübergreifenden Rendering sicherzustellen.

Unter anderem gibt es einen Firefox-Fehler, der verhindert, dass wir die Zeilenhöhe von <input> -basierten Schaltflächen festlegen, was dazu führt, dass sie nicht genau mit der Höhe anderer Schaltflächen in Firefox übereinstimmen. "

<input type='submit' /> unterstützt kein HTML darin, da es sich um ein einzelnes selbstschließendes Tag handelt. <button> unterstützt dagegen HTML, Bilder usw. im Inneren, da es sich um ein Tag-Paar handelt: <button><img src='myimage.gif' /></button>. <button> ist auch flexibler im CSS-Stil.

Der Nachteil von <button> wird von älteren Browsern nicht vollständig unterstützt. IE6/7 zeigt es beispielsweise nicht richtig an.

Sofern Sie keinen bestimmten Grund haben, ist es wahrscheinlich am besten, sich an <input type='submit' />.

Obwohl beide Elemente funktional dasselbe Ergebnis liefern *, ich empfehle dringend die Verwendung von <button>:

• Weitaus eindeutiger und lesbarer. input weist darauf hin, dass das Steuerelement bearbeitbar ist oder vom Benutzer bearbeitet werden kann; button ist in Bezug auf den Zweck, zu dem es dient, weitaus eindeutiger
• Einfacher in CSS zu stylen; Wie oben erwähnt, haben FIrefox und IE Macken, in denen input[type="submit"] werden in einigen Fällen nicht richtig angezeigt
• Vorhersehbare Anforderungen: IE hat ein sehr ähnliches Verhalten, wenn Werte in der Anforderung POST/GET an den Server gesendet werden
• Markup-freundlich; Sie können Elemente, z. B. Symbole, innerhalb der Schaltfläche verschachteln.
• HTML5, vorausschauend; Als Entwickler liegt es in unserer Verantwortung, die neue Spezifikation zu übernehmen, sobald sie offiziell ist. HTML5 ist ab sofort seit über einem Jahr offiziell und wurde in vielen Fällen als Boost-SEO gezeigt.

* _{Mit Ausnahme von <button type="button">, für das standardmäßig kein Verhalten angegeben ist.}

Zusammenfassend: Ich rate von der Verwendung von <input type="submit" />.

Mir ist klar, dass dies eine alte Frage ist, aber ich habe sie auf mozilla.org gefunden und denke, dass sie zutrifft.

Es gibt drei Arten von Schaltflächen: Senden, Zurücksetzen oder Schaltflächen. Durch Klicken auf eine Senden-Schaltfläche werden die Daten des Formulars an die durch das Aktionsattribut des Elements definierte Webseite gesendet.

Durch Klicken auf eine Schaltfläche zum Zurücksetzen werden alle Formular-Widgets sofort auf ihren Standardwert zurückgesetzt. Aus UX-Sicht wird dies als schlechte Praxis angesehen.

Ein Klick auf eine Schaltfläche bewirkt ... nichts! Das klingt albern, aber es ist erstaunlich nützlich, benutzerdefinierte Schaltflächen mit JavaScript zu erstellen.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form#And_a_ <button> _to_finish

<button> ist neuer als <input type="submit">, ist semantischer, einfach zu formatieren und unterstützt HTML darin.

Während die anderen Antworten großartig sind und die Frage beantworten, gibt es eine Sache zu beachten, wenn input type="submit" Und button verwendet werden. Mit einem input type="submit" Können Sie kann nicht ein CSS-Pseudoelement für die Eingabe verwenden, aber Sie können für eine Schaltfläche!

Dies ist ein Grund, ein button -Element über einer Eingabe zu verwenden, wenn es um das Stylen geht.

Ich weiß nicht, ob dies ein Fehler oder eine Funktion ist, aber es gibt einen sehr wichtigen (zumindest in einigen Fällen) Unterschied, den ich gefunden habe: <input type="submit"> erstellt ein Schlüsselwertpaar in Ihrer Anfrage und <button type="submit"> nicht. Getestet in Chrome und Safari.

Wenn Sie also mehrere Senden-Schaltflächen in Ihrem Formular haben und wissen möchten, auf welche Schaltfläche geklickt wurde - verwenden Sie nicht button, sondern input type="submit" stattdessen.