Frage

Bei der Suche an den meisten Standorten (einschließlich SO), die meisten von ihnen verwenden: 

<input type="button" />

statt: 

<button></button>
  • Was sind die wichtigsten Unterschiede zwischen den beiden sind, wenn überhaupt?
  • Gibt es gute Gründe, eine verwenden anstelle des anderen?
  • Gibt es gute Gründe, sie zu benutzen zu kombinieren?
  • Ist mit mit Kompatibilitätsproblemen <button> kommen, es zu sehen, ist nicht sehr weit verbreitet?
War es hilfreich?

Lösung

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

  

Und während wir über IE sprechen, es ist   habe ein paar Fehler zu der damit verbundenen   Breite der Tasten. Es wird auf mysteriöse Weise   fügen Sie zusätzliche Polsterung, wenn Sie versuchen,   Stile hinzufügen, dh Sie müssen hinzufügen   ein winziger Hack, um Dinge unter   Kontrolle.

Andere Tipps

So wie eine Randnotiz, <button> wird implizit unterwerfen, was zu Problemen führen kann, wenn Sie auf eine Schaltfläche in einem Formular verwenden möchten, ohne es zu übermitteln. Somit ist ein weiterer Grund zu verwenden <input type="button"> (oder <button type="button">)

Bearbeiten - mehr Informationen

Ohne eine Art, button erhält implizit Art von submit . Es spielt keine Rolle, wie viele einreichen Tasten oder Eingaben dort in Form sind, eine von ihnen, die explizit oder implizit als einreichen eingegeben wird, wenn darauf geklickt wird, wird das Formular aus.

Es gibt 3 unterstützten 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 eine ziemlich gute Übersicht über den Unterschied zu bieten.

Auf der Seite:

  

Buttons mit der Taste Elementfunktion erstellt wie Tasten   mit dem INPUT-Elemente geschaffen, sondern   sie bieten reicher Rendering   Möglichkeiten: das BUTTON-Element kann   Inhalt haben. Zum Beispiel kann ein BUTTON   Element, das ein Bild enthält,   Funktionen wie und ein ähneln   INPUT Element, dessen Typ auf   „Bild“, aber die Schaltfläche Elementart   können Inhalte.

     

Der Button Element - W3C

Innerhalb eines <button> Element Sie Inhalte setzen können, wie Text oder Bilder. 

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

Das ist der Unterschied zwischen diesem Elemente und Tasten mit dem <input> Elemente erstellt.

Zitat

  

Wichtig: Wenn Sie auf die Schaltfläche Element in einem HTML-Formular verwenden, werden verschiedene Browser unterschiedliche Werte einreichen. Internet Explorer wird der Text zwischen den <button> und </button> Tags einreichen, während andere Browser den Inhalt des Wertattribut einreichen. Verwenden Sie das Eingabeelement erstellen Schaltflächen in einem HTML-Formular.

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

Wenn ich richtig verstehe, ist die Antwort Kompatibilität und Eingangskonsistenz von Browser zu Browser

die Forms Seite in dem HTML-Handbuch :

  

Buttons mit der Taste Elementfunktion erstellt wie Tasten mit dem INPUT-Elemente erstellt, aber sie bieten reiche Rendering-Möglichkeiten: über die Schaltfläche Elementgehalt aufweist. Zum Beispiel kann ein BUTTON-Element, das eine Bild-Funktionen wie enthält und ein Eingangselement, dessen Typen ähneln wird auf „Bild“, aber der Schaltfläche Elementtyp ermöglicht Inhalt.

Mit der Taste von Eingabeelement, wenn Sie Schaltfläche in einem Formular erstellen möchten. Und Ohrenmarke verwenden, wenn Sie Taste für eine Aktion erstellen möchten.

Ich werde den Artikel zitieren Der Unterschied zwischen Anker, Eingängen und Tasten :

Anker (das <a> Element) repräsentiert Hyperlinks, Ressourcen eine Person oder laden Sie in einem Browser navigieren kann. Wenn Sie möchten, dass Ihre Benutzer ermöglichen, auf eine neue Seite zu bewegen oder eine Datei herunterladen, verwenden Sie einen Anker.

Ein Eingang (<input>) ein Datenfeld: so einige Benutzerdaten Sie meinen zum Server zu senden. Es gibt mehrere Input-Typen im Zusammenhang mit Tasten: <input type="submit">, <input type="image">, <input type="file">, <input type="reset">, <input type="button">.
Jeder von ihnen hat eine Bedeutung, zum Beispiel " Datei " verwendet wird, um eine Datei zu laden, " Zurücksetzen " löscht ein Formular, und „ einreichen “an den Server schickt die Daten. Überprüfen W3 Referenz auf MDN oder auf W3Schools .

Die (<button>) Element ist sehr vielseitig:

  • Sie können Nest Elemente innerhalb einer Taste, wie Bilder, Absätze oder Header;
  • Tasten können auch ::before und ::after Pseudo-Elemente enthalten;
  • , um das disabled Attribut unterstützen. Dies macht es leicht zu drehen sie ein und aus.

Auch hier prüfen W3 Referenz für <button> Tag auf MDN oder auf W3Schools .

Es gibt einen großen Unterschied, wenn Sie jQuery verwenden. jQuery ist sich dessen bewusst mehr Ereignisse an den Eingängen, als es auf Tasten der Fall ist. Auf Tasten, ist jQuery nur bewusst ‚Klick‘ Ereignisse. An den Eingängen, ist jQuery bewusst 'Klick', 'Focus' und 'Unschärfe' Ereignisse.

Sie können immer binden Ereignisse Ihre Tasten je nach Bedarf, sondern nur bewusst sein, dass die Ereignisse, die automatisch jQuery unterschiedlicher sind uns bewusst ist. Wenn Sie eine Funktion erstellt zum Beispiel, die ausgeführt wurde, wenn es ein ‚focusin‘ war Ereignis auf Ihrer Seite, eine Eingabe würde die Funktion auslösen, sondern eine Taste würde nicht. 

<button>
  • standardmäßig verhält sich wie wenn sie eine hat "type =" submit“Attribut
  • kann ohne Form als auch in Formen verwendet werden.
  • Text oder HTML-Inhalte erlaubt
  • CSS-Pseudo-Elemente erlaubt (wie: vor)
  • Tag-Name ist in der Regel eindeutig eine einzige Form

vs. 

<input type='button'>
  • Typ ‚Senden‘ eingestellt werden soll als einreichenden Element verhalten
  • kann nur in Formen verwendet werden.
  • nur Textinhalt erlaubt
  • keine CSS-Pseudo-Elemente
  • gleichen Tag-Namen wie die meisten der Formen Elemente (Eingänge)

-
in modernen Browsern, sind beide Elemente leicht styleable mit CSS, aber in den meisten Fällen ist button Element bevorzugt, wie Sie mehr mit inneren html und Pseudo-Elemente stylen können

Was CSS Styling betrifft die <button type="submit" class="Btn">Example</button> ist besser, da es Ihnen die Möglichkeit gibt, CSS :before und :after verwenden Pseudo-Klassen die helfen können.

Durch die <input type="button"> visuell unterschiedlich zu einem <a> oder <span> machen, wenn sie mit Klassen in bestimmten Situationen gestylt ich sie vermeiden.

Es ist sehr wert die aktuelle Top-Antwort unter Hinweis darauf, wurde 2009 IE6 geschrieben ist jetzt kommt kein Problem Tage so <button type="submit">Wins</button> Styling Konsistenz in meinen Augen auf.

<button> ist flexibel, dass sie HTML enthalten kann. Darüber hinaus ist es viel einfacher zu gestalten, CSS, und das Styling wird tatsächlich in allen Browsern angewandt. Es gibt jedoch einige Nachteile in Bezug auf Internet Explorer (Eww! IE!). Internet Explorer erkennt nicht den Wert Attribut richtig, die Tag-Inhalt als Wert verwendet wird. Alle Werte in einem Formular auf die Server-Seite gesendet, unabhängig davon, ob die Schaltfläche geklickt wird. Dies macht es als <button type="submit"> heikel und Schmerzen verwendet wird.

<input type="submit"> auf der anderen Seite hat keine Wert oder Erkennung Probleme, aber Sie können jedoch nicht hinzufügen, HTML wie möglich mit <button>. Es ist auch schwieriger zu Stil, und das Styling reagiert nicht immer gut in allen Browsern. Hoffe, dass dies geholfen hat.

Ich will nur hier etwas für den Rest der Antworten hinzuzufügen. Eingabeelemente sind leer oder ungültig Elemente betrachtet (andere leere Elemente sind Bereich, Base, br, col, hr, img, input, Link, Meta- und param Sie können auch ein href überprüfen <= "https:. //Developer.mozilla .org / en-US / docs / Glossar / Empty_element“rel = "nofollow noreferrer"> hier ), das heißt, sie keinen Inhalt haben. Darüber hinaus haben nicht alle Inhalte, leere Elemente kann keine pseudo-Elemente wie :: nach und :: before , die ich einen großen Nachteil in Betracht ziehen.

zusätzlich einer der Unterschiede können von Anbieter der Bibliothek kommen, und was sie Code. zum Beispiel hier verwende ich cordova Plattform in Kombination mit mobilen Winkel ui, und während Eingabe / div / etc-Tags gut arbeiten ng klicken, können Sie die Taste Visual Studio-Debugger verursachen, indem sie Unterschiede zum Absturz zu bringen, sicher, dass der Programmierer verursacht; beachten Sie, dass MattC Antwort auf die gleiche Frage, die jQuery nur lib ist, und der Anbieter hätte nicht gedacht, von einem gewissen Funktionalität auf ein Element, dass er / sie auf einem anderen zur Verfügung stellt. Wenn Sie also eine Bibliothek verwenden, können Sie ein Problem mit einem Element, Gesicht, die Sie nicht mit einem anderen Gesicht. und einfach die beliebte eine wie input, wird meist die feste sein, nur weil es immer beliebter.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top