<button> vs. <input type = “button” />. Welche verwenden?

1635

Bei der Betrachtung der meisten Websites (einschließlich SO) verwenden die meisten von ihnen:

<input type="button" />

anstatt:

<button></button>
  • Was sind die Hauptunterschiede zwischen den beiden, wenn überhaupt?
  • Gibt es triftige Gründe, einen anstelle des anderen zu verwenden?
  • Gibt es triftige Gründe, sie zu kombinieren?
  • Ist die Verwendung <button>mit Kompatibilitätsproblemen verbunden, da sie nicht sehr häufig verwendet wird?
Aron Rotteveel
quelle

Antworten:

662

Ein weiteres IE-Problem bei der Verwendung <button />:

Und während wir über IE sprechen, gibt es ein paar Fehler, die mit der Breite der Schaltflächen zusammenhängen. Es wird auf mysteriöse Weise zusätzliche Polsterung hinzufügen, wenn Sie versuchen, Stile hinzuzufügen, was bedeutet, dass Sie einen winzigen Hack hinzufügen müssen, um die Dinge unter Kontrolle zu bringen.

Tamas Czinege
quelle
186
Diese Antwort war im Jahr 2009, da IE6 jetzt tot ist. Ich nehme an, es gibt keinen Grund, es <button>jetzt nicht zu verwenden .
Rosdi Kasim
75
Wenn sie Raubkopien machen wollen, lassen Sie sie eine blöde Version Ihrer Website bekommen. Drop IE6, Drop IE7, leider braucht IE8 noch Unterstützung.
Jared
15
Laut der IE6-Countdown-Seite von Microsoft liegt die IE6 -Nutzung in China (Stand Januar 2014) immer noch bei etwa 22%. ie6death.com stellt fest, dass die IE6-Unterstützung am 8. April 2014 endet.
BryanH
54
Wie viele witzelten, sind Benutzer, die noch alte IE-Versionen verwenden, wahrscheinlich daran gewöhnt, dass das Internet schrecklich kaputt aussieht.
Jinglesthula
9
<button />hat auch ein formAttribut (und verwandte Attribute), so dass es mit Formularen in anderen Teilen des Dokumentkörpers verknüpft werden kann.
Gup3rSuR4c
327

Nur als Randnotiz <button>wird implizit gesendet, was zu Problemen führen kann, wenn Sie eine Schaltfläche in einem Formular verwenden möchten, ohne dass sie gesendet wird. Ein weiterer Grund, <input type="button">(oder <button type="button">) zu verwenden

Bearbeiten - weitere Details

buttonEmpfängtsubmit ohne Typ implizit den Typ . Es spielt keine Rolle, wie viele Senden-Schaltflächen oder Eingaben sich im Formular befinden. Jede dieser Schaltflächen, die explizit oder implizit als Senden eingegeben wird, sendet beim Klicken das Formular.

Es gibt 3 unterstützte Typen für eine Schaltfläche

submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"
Travis J.
quelle
4
Können Sie weitere Details hinzufügen? Was passiert, wenn mehrere Tasten vorhanden sind? ist es nur type = 'submit', das dies tut?
Simon_Weaver
44
Oh lieber W3C, warum submitstandardmäßig, wenn 99,9% der Formulare viel buttonmit einem haben submit ?!
2grit
13
Viele Formulare haben auch nur eine Schaltfläche, nämlich das Senden. Ich nehme an, ich musste in die eine oder andere Richtung telefonieren.
Jinglesthula
5
Das kann GROSSES Gotcha sein! Mein Testcode wird in etwa 80% der Fälle gesendet, andernfalls wurde er als normaler Button behandelt. VORSICHT bei Verwendung von <button> in einem <form>
Sydwell
4
@ mik01aj "Es spielt keine Rolle, wie viele Senden-Schaltflächen oder Eingaben sich im Formular befinden. Jede dieser Schaltflächen, die explizit oder implizit als Senden eingegeben wird, sendet das Formular, wenn Sie darauf klicken." Ist das nicht offensichtlich? Jeder Senden-Button sollte das Formular senden. Warum das sagen? Was vermisse ich?
Concrete Gannet
174

Dieser Artikel scheint einen ziemlich guten Überblick über den Unterschied zu bieten.

Von der Seite:

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.

Das Tastenelement - W3C

Noldorin
quelle
44

Innerhalb eines <button>Elements können Sie Inhalte wie Text oder Bilder einfügen.

<button type="button">Click Me!</button> 

Dies ist der Unterschied zwischen diesem Element und den mit dem <input>Element erstellten Schaltflächen .

Santhosh
quelle
4
+1, da <input />ist in der Tat ein nichtiges Element, während <button>es nicht ist
Sebastian
39

Zitat

Wichtig: Wenn Sie das Schaltflächenelement in einem HTML-Formular verwenden, senden verschiedene Browser unterschiedliche Werte. Internet Explorer sendet den Text zwischen den Tags <button>und und </button>Tags, während andere Browser den Inhalt des Wertattributs senden. Verwenden Sie das Eingabeelement, um Schaltflächen in einem HTML-Formular zu erstellen.

Von : http://www.w3schools.com/tags/tag_button.asp

Wenn ich das richtig verstehe, lautet die Antwort Kompatibilität und Eingabekonsistenz von Browser zu Browser

user54579
quelle
43
@ Hawken Diese Seite wurde von Idioten geschrieben, die dachten, W3Schools gaben vor, W3C zu sein. In Wirklichkeit ist W3Schools nicht besser oder schlechter als Tausende anderer Websites, die mit dieser Art von Material umgehen.
Herr Lister
Eigentlich hängt es von der Version des IE und dem IE-Modus ab - w3schools hat die Informationen seit dem Zitat aktualisiert
Damien
12
@ MrLister Ich habe mit Leuten gesprochen, die glauben, dass W3Schools mit dem W3C verbunden ist. Ich bin mir zwar nicht sicher, ob ich der "Verantwortung von W3Fools für die Bereitstellung genauer Informationen" zustimme, aber ich denke, dass die Genauigkeit von W3Schools zu wünschen übrig lässt und dass seine Kritiker nicht unbedingt Idioten sind. (Ich habe viel von W3S gelernt, als es gut war; es hat nicht mit den Standards Schritt gehalten.)
Marnen Laibow-Koser
17
@MrLister W3Schools ist mit Sicherheit die am häufigsten verwendete inoffizielle Quelle für Web-Tech-Informationen. Und die Qualität ist wirklich schlecht. Warum sie nicht herausgreifen? Und welche Details haben W3Fools falsch gemacht? Alles dort sieht für mich richtig aus.
Marnen Laibow-Koser
19

Ich werde den Artikel Der Unterschied zwischen Ankern, Eingaben und Knöpfen zitieren :

Anker (das <a>Element) stellen Hyperlinks dar, Ressourcen, zu denen eine Person navigieren oder die sie in einem Browser herunterladen kann. Wenn Sie Ihrem Benutzer erlauben möchten, zu einer neuen Seite zu wechseln oder eine Datei herunterzuladen, verwenden Sie einen Anker.

Eine Eingabe ( <input>) stellt ein Datenfeld dar: also einige Benutzerdaten, die Sie an den Server senden möchten. Es gibt verschiedene Eingabetypen für Schaltflächen:

  • <input type="submit">
  • <input type="image">
  • <input type="file">
  • <input type="reset">
  • <input type="button">

Jeder von ihnen hat eine Bedeutung, zum Beispiel wird " Datei " zum Hochladen einer Datei verwendet, " Zurücksetzen " löscht ein Formular und " Senden " sendet die Daten an den Server. Überprüfen Sie die W3-Referenz auf MDN oder W3Schools .

Die Schaltfläche ( <button>)Element ist sehr vielseitig:

  • Sie können Elemente innerhalb einer Schaltfläche wie Bilder, Absätze oder Überschriften verschachteln.
  • Tasten können auch enthalten ::beforeund ::afterpseudo-Elemente;
  • Schaltflächen unterstützen das disabledAttribut. Dies macht es einfach, sie ein- und auszuschalten.

Überprüfen Sie erneut die W3-Referenz auf <button>Tags in MDN oder W3Schools .

Attilio
quelle
17

Zitieren der Formularseite im HTML-Handbuch:

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.

gimel
quelle
17

Verwenden Sie die Schaltfläche aus dem Eingabeelement, wenn Sie eine Schaltfläche in einem Formular erstellen möchten. Verwenden Sie das Schaltflächen-Tag, wenn Sie eine Schaltfläche für eine Aktion erstellen möchten.

Nickomarsa
quelle
9
Für clientseitiges Scripting. <input type = "button"> hat keine Funktion in HTML.
iGEL
12
<button>
  • Standardmäßig verhält es sich so, als hätte es das Attribut "type =" submit "
  • kann sowohl ohne Formular als auch in Formularen verwendet werden.
  • Text- oder HTML-Inhalt erlaubt
  • CSS-Pseudoelemente erlaubt (wie: vorher)
  • Der Tag-Name ist normalerweise für ein einzelnes Formular eindeutig

vs.

<input type='button'>
  • Der Typ sollte auf "Submit" gesetzt werden, um sich als Submit-Element zu verhalten
  • kann nur in Formularen verwendet werden.
  • Nur Textinhalt erlaubt
  • Keine CSS-Pseudoelemente
  • gleicher Tag-Name wie die meisten Formularelemente (Eingaben)

-
In modernen Browsern können beide Elemente leicht mit CSS gestylt werden. In den meisten Fällen wird jedoch das buttonElement bevorzugt, da Sie mehr mit inneren HTML- und Pseudoelementen stylen können

Sergey Sklyar
quelle
9

Was das CSS-Styling betrifft, <button type="submit" class="Btn">Example</button>ist dies besser, da Sie damit CSS- :beforeund :after Pseudoklassen verwenden können können, die hilfreich sein können.

Aufgrund der <input type="button">optischen Darstellung unterscheidet sich ein <a>oder<span> wenn sie in bestimmten Situationen mit Klassen gestaltet wird, vermeide ich sie.

Es ist sehr erwähnenswert, dass die aktuelle Top-Antwort im Jahr 2009 geschrieben wurde. IE6 ist heutzutage kein Problem mehr, sodass die <button type="submit">Wins</button>Styling-Konsistenz in meinen Augen die Nase vorn hat .

jnowland
quelle
9

Es gibt einen großen Unterschied, wenn Sie jQuery verwenden. jQuery erkennt mehr Ereignisse an Eingaben als an Schaltflächen. Auf Schaltflächen erkennt jQuery nur Klickereignisse. Bei Eingaben erkennt jQuery die Ereignisse "Klicken", "Fokussieren" und "Verwischen".

Sie können Ereignisse jederzeit nach Bedarf an Ihre Schaltflächen binden. Beachten Sie jedoch, dass die Ereignisse, die jQuery automatisch erkennt, unterschiedlich sind. Wenn Sie beispielsweise eine Funktion erstellt haben, die ausgeführt wurde, wenn auf Ihrer Seite ein Fokusereignis aufgetreten ist, wird die Funktion durch eine Eingabe ausgelöst, eine Schaltfläche jedoch nicht.

MattC
quelle
re: KjetilNordin - Wir hatten eine Anwendung, die alle Fokusereignisse auf einer Seite kannte, und eine trat auf, eine Aktion fand statt. Wenn Sie also eine Eingabe verwenden, können Sie alle Elemente für ein einzelnes Ereignis überwachen. Ich sage nicht, dass du solltest, aber du könntest. Das Risiko besteht darin, dass jemand die Eingabe in eine Schaltfläche ändert und dann die Fokussierung nicht erfolgt und Ihre Aktion dann nicht erfolgt und Ihre App boomt. Das ist uns passiert. :)
MattC
1
Verwenden Sie Fokusereignisse, wenn ein Element derzeit über Maus / Tastatur als Ziel ausgewählt wird. Sie zeigen dem Benutzer, wo sie sich im Dokument befinden.
Albert
7

<button>ist insofern flexibel, als es HTML enthalten kann. Darüber hinaus ist es viel einfacher, mit CSS zu stylen, und das Styling wird tatsächlich auf alle Browser angewendet. Es gibt jedoch einige Nachteile in Bezug auf Internet Explorer (Eww! IE!). Internet Explorer erkennt das Wertattribut nicht richtig und verwendet den Inhalt des Tags als Wert. Alle Werte in einem Formular werden an den Server gesendet, unabhängig davon, ob auf die Schaltfläche geklickt wird oder nicht. Dies macht die Verwendung als<button type="submit"> schwierig und schmerzhaft .

<input type="submit">Auf der anderen Seite gibt es keine Wert- oder Erkennungsprobleme, Sie können jedoch kein HTML hinzufügen, wie Sie es können <button>. Es ist auch schwieriger zu stylen, und das Styling reagiert nicht immer in allen Browsern. Hoffe das hat geholfen.

Moh S.
quelle
7

Ich möchte hier nur etwas zu den restlichen Antworten hinzufügen. Eingabeelemente werden als leere oder leere Elemente betrachtet (andere leere Elemente sind area, base, br, col, hr, img, input, link, meta und param. Sie können dies auch hier überprüfen ), dh sie können keinen Inhalt haben. Leere Elemente haben nicht nur keinen Inhalt, sondern auch keine Pseudoelemente wie :: after und :: before , was ich als großen Nachteil betrachte.

Roumelis George
quelle
4

Darüber hinaus kann einer der Unterschiede vom Anbieter der Bibliothek und deren Code stammen. Zum Beispiel verwende ich hier die Cordova-Plattform in Kombination mit einer mobilen Winkel-Benutzeroberfläche. Während die Tags input / div / etc gut mit ng-click funktionieren, kann die Schaltfläche dazu führen, dass der Visual Studio-Debugger abstürzt, sicherlich aufgrund von Unterschieden, die der Programmierer verursacht hat. Beachten Sie, dass die MattC-Antwort auf dasselbe Problem verweist. Die jQuery ist nur eine Bibliothek, und der Anbieter hat nicht an einige Funktionen für ein Element gedacht, die er für ein anderes bereitstellt. Wenn Sie also eine Bibliothek verwenden, kann es bei einem Element zu einem Problem kommen, bei einem anderen nicht. und einfach das populäre wie input, wird meistens das feste sein, nur weil es populärer ist.

deadManN
quelle
4

Obwohl dies eine sehr alte Frage ist und möglicherweise nicht mehr relevant ist, denken Sie bitte daran, dass die meisten Probleme, die die <button> Tag früher hatte, nicht mehr existieren und daher sehr ratsam sind, es zu verwenden.

Falls Sie dies aus verschiedenen Gründen nicht tun können, denken Sie daran, das Attribut role = ”button” in Ihrem Tag hinzuzufügen, um die Zugänglichkeit zu gewährleisten. Dieser Artikel ist sehr informativ: https://www.deque.com/blog/accessible-aria-buttons/

Nasia Makrygianni
quelle