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

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?

• Hier ist eine Seite , die die Unterschiede beschreibt (im Grunde können Sie HTML in eine einfügen <button></button>)
• Und eine weitere Seite, die beschreibt, warum Menschen meiden <button></button>(Hinweis: IE6)

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.

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"

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

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 .

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

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 .

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.

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.

<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

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 .

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.

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

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.

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.

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/