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

233

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?

Jitendra Vyas
quelle
Vermeiden Sie einen lustigen Tag während der Verwendung buttonund das valueAttribut in einer Version von IE inputsendet nur das, was Sie erwartet haben, eine Version von IE spielt nicht gut mit buttons.
Rubens Mariuzzo
Die Antworten sind im Grunde die gleichen wie für input type="button"vs button type=button: stackoverflow.com/questions/469059/…
Ciro Santilli 法轮功 冠状 病 六四 事件 26
Beantwortet das deine Frage? <button> vs. <input type = "button" />. Welche verwenden?
Leonheess

Antworten:

130

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

MatTheCat
quelle
7
Achtung, IE6 übermittelt die Werte aller Schaltflächen auf der Seite, wodurch es schwierig wird, genau zu bestimmen, auf welche Schaltfläche geklickt wurde. Erklärung: vancelucas.com/blog/ie6-and-multiple-button-submit-elements
Sam
6
Nur FYI Sie nicht haben zu verwenden , type="submit"mit Knopf, als Standard für typeist submit.
Synchronisierung
8
Das sagt W3C, aber ich bin mir ziemlich sicher, dass ich Fälle gesehen habe, in denen typeStandard war button. Ich bevorzuge es, jedes Attribut zu explizieren, um Inkonsistenzen im Browser zu vermeiden.
MatTheCat
5
laut Referenz ja. aber nicht alle Browser halten sich an Referenzspezifikationen, oder?
EKanadily
2
@chharvey, nein, erstere dürfen untergeordnete Knoten haben. dh Nicht-Text-Inhalt. Ich nehme an, Sie könnten sagen, dass abgesehen von der Kürze kein Grund für die Existenz des letzteren besteht.
Paul Draper
71

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.

der Programmierer
quelle
5
Die Frage ist über das Button-Tag nicht <input type = "button">
Caltor
7
Die Frage ist über <input>und <button>Tags. Sie haben <input>in Ihrer Antwort nützliche Informationen angegeben , aber es fehlt die <button>Seite.
Pmpr
43

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

rolfk
quelle
4
+1 dafür. buttonist weitaus expliziter, ariaverfügt über Eingabehilfen und ist viel einfacher zu gestalten. Es ist auch zukunftsorientiert, da es sich um HTML5 handelt.
user1429980
37

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

user1429980
quelle
Danke dir. Ich habe danach gesucht, insbesondere nach dem semantischen Punkt von HTML5. Im Jahr 2020 müssen wir über die reine Funktionalität hinausdenken.
pierre_loic
27

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

Jared Ng
quelle
1
Die Antwort war von vor 2 Jahren. Es ist auch sehr gut möglich, alternativen Schaltflächentext anzugeben:<input type="submit" value="Log In" />
Jared Ng
2
@nailer Sie haben ein Recht auf Ihre Meinung, aber jede Antwort bezieht sich unweigerlich auf den aktuellen Stand der Technik. Vielleicht wird HTML 6 <button>zugunsten von etwas Neuem veraltet . Bedeutet das, dass wir in den Antworten überhaupt kein bestimmtes Tag erwähnen sollten, da es sich irgendwann in der Zukunft ändern könnte ? Ich würde es vorziehen, es dem Leser als Übung zu überlassen, um festzustellen, wie die Antworten auf ihre Situation zutreffen. Solange die Informationen für den Leser wertvoll sind, sehe ich das Problem nicht darin, sie aufzunehmen.
Jared Ng
1
Zum Zeitpunkt der Antwort war IE6 / 7 bereits veraltet. Ein neuer Webentwickler, der Ihren Beitrag liest, ohne Ihre unterstützenden Argumente zu überprüfen und zu erkennen, dass sie nicht mehr zutreffen, würde denken, dass es einen guten Grund gibt, keine Schaltflächenelemente zu verwenden.
Mikemaccana
2
@nailer Es gibt keine universelle "veraltete" Browserliste, die von allen eingehalten wird. Unterschiedliche Arbeitsplätze stellen unterschiedliche Anforderungen an unterstützte Browser. Nur weil Ihr Standard für "unterstützte Browser" im Jahr 2011 IE6 / 7 nicht enthielt, heißt das nicht, dass dies überall der Fall ist.
Jared Ng
1
Ich bin mir bewusst, dass es keine universelle "veraltete" Browserliste gibt - daher wird nicht jeder so etwas erwähnen. Ich sage nur, dass dies besser formuliert werden könnte als "IE6 / 7 unterstützt die Anzeigetaste nicht richtig. Wenn dies ein Problem ist, bleiben Sie bei der Eingabe". Das heißt, Sie wissen, dass sich die Browser ändern werden, berücksichtigen Sie dies. Dadurch wird verhindert, dass StackOverflow bei IE6-Problemumgehungen für immer angehalten wird.
Mikemaccana
14

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

Jere.me
quelle
Wie ist es nützlich, wenn es nichts tut?
Honey
4
Weil Sie dann Handler über Javascript
fonso
@Honey zum Beispiel können Sie a codieren <button type="button">, um einen Schieberegler / ein Karussell zur nächsten Folie zu bewegen .
Chharvey
11

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

Acaz Souza
quelle
8

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.

L84
quelle
3

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.

Ivan Yarych
quelle
Aus meiner Erfahrung ist es absolut umgekehrt, die Schaltfläche übergibt $ _POST ["submit_name"] und die Eingabe NICHT. auf Chrom getestet. Firefox sendet immer $ _POST ["submit_name"].
Gall Annonim
@GallAnnonim Vielleicht hängt das vom Dokumenttyp ab. Weil ich definitiv input type =
submit benutze
Interessant ... Ich habe <! DOCTYPE html> mit lang "pl" && verwendet, um utf-8 zu codieren, wenn es einen Unterschied macht. Chrom ist 58.0.3029.96
Gall Annonim
-2

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

DarylChymko
quelle
14
Sie können <button type="submit">Formulare automatisch senden.
Jumpnett