<button> vs. <input type="button" />. Was ist zu verwenden?

Question

Wenn man sich die meisten Websites (einschließlich SO) ansieht, verwenden die meisten von ihnen:

<input type="button" />

anstelle von:

<button></button>

• Was sind die wichtigsten Unterschiede zwischen den beiden, wenn überhaupt?
• Gibt es triftige Gründe für die Verwendung des einen statt des anderen?
• Gibt es stichhaltige Gründe, sie zu kombinieren?
• Verwendet <button> mit Kompatibilitätsproblemen zu kämpfen haben, da es nicht sehr weit verbreitet ist?

Answer 1

• Hier ist eine Seite die die Unterschiede beschreiben (im Grunde kann man html in eine <button></button> )
• Und eine weitere Seite zu beschreiben, warum die Menschen vermeiden <button></button> (Hinweis: IE6)

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

Und wenn wir schon über den IE reden, es ist hat ein paar Fehler im Zusammenhang mit der Breite von Schaltflächen. Er fügt auf mysteriöse Weise zusätzliche Polsterung hinzu, wenn Sie versuchen Stile hinzuzufügen, d.h. man muss einen einen kleinen Hack hinzufügen, um die Dinge unter unter Kontrolle zu bringen.

Answer 2

Nur als Randbemerkung, <button> wird implizit übermittelt, was zu Problemen führen kann, wenn Sie eine Schaltfläche in einem Formular verwenden möchten, ohne dass sie übermittelt wird. Dies ist ein weiterer Grund für die Verwendung von <input type="button"> (oder <button type="button"> )

Editar - mehr Details

Ohne einen Typ, button erhält implizit den Typ von submit . Es spielt keine Rolle, wie viele Übermittlungsschaltflächen oder Eingaben im Formular vorhanden sind, jede davon, die explizit oder implizit als Übermittlung eingegeben wird, wird das Formular übermitteln, wenn sie angeklickt wird.

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"

Answer 3

Dieser Artikel scheint einen recht guten Überblick über die Unterschiede zu bieten.

Von der Seite:

Schaltflächen, die mit dem BUTTON-Element erstellt wurden, funktionieren genau wie Schaltflächen die mit dem INPUT-Element erstellt werden, aber sie bieten umfangreichere Rendering Möglichkeiten: Das BUTTON-Element kann Inhalt haben. Zum Beispiel kann ein BUTTON Element, das ein Bild enthält funktioniert wie ein INPUT-Element ähneln, dessen Typ festgelegt ist auf "Bild" gesetzt ist, aber der Elementtyp BUTTON erlaubt Inhalt.

Das Schaltflächen-Element - W3C

Answer 4

Im Inneren einer <button> Element können Sie Inhalte, wie Text oder Bilder, einfügen.

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

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

Answer 5

Zitat

Wichtig: Wenn Sie das Schaltflächenelement in einem HTML-Formular verwenden, übermitteln verschiedene Browser unterschiedliche Werte. Der Internet Explorer übermittelt den Text zwischen den <button> y </button> Tags, während andere Browser den Inhalt des value-Attributs übermitteln. Verwenden Sie das input-Element, um Schaltflächen in einem HTML-Formular zu erstellen.

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

Wenn ich das richtig verstehe, geht es um Kompatibilität und Eingabekonsistenz von Browser zu Browser