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?
html
button
compatibility
html-input
Aron Rotteveel
quelle
quelle
<button>
jetzt nicht zu verwenden .<button />
hat auch einform
Attribut (und verwandte Attribute), so dass es mit Formularen in anderen Teilen des Dokumentkörpers verknüpft werden kann.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 verwendenBearbeiten - weitere Details
button
Empfä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
quelle
submit
standardmäßig, wenn 99,9% der Formulare vielbutton
mit einem habensubmit
?!Dieser Artikel scheint einen ziemlich guten Überblick über den Unterschied zu bieten.
Von der Seite:
quelle
Innerhalb eines
<button>
Elements können Sie Inhalte wie Text oder Bilder einfügen.Dies ist der Unterschied zwischen diesem Element und den mit dem
<input>
Element erstellten Schaltflächen .quelle
<input />
ist in der Tat ein nichtiges Element, während<button>
es nicht istZitat
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
quelle
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:::before
und::after
pseudo-Elemente;disabled
Attribut. Dies macht es einfach, sie ein- und auszuschalten.Überprüfen Sie erneut die W3-Referenz auf
<button>
Tags in MDN oder W3Schools .quelle
Zitieren der Formularseite im HTML-Handbuch:
quelle
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.
quelle
vs.
-
In modernen Browsern können beide Elemente leicht mit CSS gestylt werden. In den meisten Fällen wird jedoch das
button
Element bevorzugt, da Sie mehr mit inneren HTML- und Pseudoelementen stylen könnenquelle
Was das CSS-Styling betrifft,
<button type="submit" class="Btn">Example</button>
ist dies besser, da Sie damit CSS-:before
und: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 .quelle
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.
quelle
<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.quelle
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.
quelle
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.quelle
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/
quelle