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

input type="submit" und button Tag sind sie austauschbar? oder wenn es einen Unterschied gibt, input type="submit"wann und wann button?

Und wenn es keinen Unterschied gibt, warum haben wir dann 2 Tags für den gleichen Zweck?

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 Rendermöglichkeiten: Das BUTTON-Element enthält möglicherweise Inhalt. Beispielsweise funktioniert ein BUTTON-Element, das ein Bild enthält, wie ein INPUT-Element, dessen Typ auf "Bild" gesetzt ist, und ähnelt möglicherweise diesem, aber der BUTTON-Elementtyp erlaubt Inhalt.

Nur für die Funktionalität sind sie 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"> , wenn sie in einem Formularelement, wird das Formular abschicken , wenn darauf geklickt.

Eine weitere nützliche Schaltfläche ist die Schaltfläche zum <input type="reset">Löschen des Formulars.

Verwenden Sie das <button> -Tag anstelle von <input type = "button" ..> . Dies wird in Bootstrap 3 empfohlen.

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

"Browserübergreifendes Rendern

Als bewährte Methode empfehlen wir dringend, nach Möglichkeit das Element <button> zu verwenden, um ein passendes browserübergreifendes Rendering sicherzustellen.

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

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

• Weitaus expliziter und lesbarer. inputschlägt vor, dass das Steuerelement bearbeitet werden kann oder vom Benutzer bearbeitet werden kann; buttonist in Bezug auf den Zweck, dem es dient, weitaus expliziter
• Einfacher in CSS zu stylen; Wie oben erwähnt, haben FIrefox und IE Macken, die input[type="submit"]in einigen Fällen nicht richtig angezeigt werden
• Vorhersehbare Anforderungen: IE hat sehr unterschiedliche Verhaltensweisen, wenn Werte im POST/ gesendet werdenGET 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 seit über einem Jahr offiziell und hat in vielen Fällen gezeigt, dass es die Suchmaschinenoptimierung fördert .

* * _{Mit der Ausnahme, dass standardmäßig kein bestimmtes Verhalten vorliegt.<button type="button">}

Zusammenfassend rate ich dringend von der Verwendung von<input type="submit" /> .

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

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

Wenn Sie keinen bestimmten Grund haben, ist es wahrscheinlich am besten, sich daran zu halten <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äche. Ein Klick auf eine Senden-Schaltfläche sendet die Daten des Formulars an die Webseite, die durch das Aktionsattribut des Elements definiert ist.

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 macht ... 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 stilisieren und unterstützt HTML darin.

Während die anderen Antworten großartig sind und die Frage beantworten, gibt es eine Sache, die bei der Verwendung von input type="submit"und zu beachten ist button. Mit einem können input type="submit"Sie kein CSS-Pseudoelement für die Eingabe verwenden, aber Sie können für eine Schaltfläche!

Dies ist ein Grund, ein buttonElement über einer Eingabe zu verwenden, wenn es um das Styling 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 festgestellt habe: <input type="submit">Erstellt ein Schlüsselwertpaar in Ihrer Anfrage und <button type="submit">tut dies nicht. Getestet in Chrome und Safari.

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

Wenn du redest <input type=button> , wird das Formular nicht automatisch gesendet

wenn Sie über die sprechen <button> Tag , ist es neuer und wird nicht automatisch in allen Browsern gesendet.

Fazit: Wenn Sie möchten, dass das Formular beim Klicken in allen Browsern gesendet wird, verwenden Sie <input type="submit">