Frage


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

<input type="button" />

Anstatt von:

<button></button>
  • Was sind die Hauptunterschiede zwischen den beiden, wenn überhaupt?
  • Gibt es berechtigte Gründe, einen anstelle des anderen zu verwenden?
  • Gibt es berechtigte Gründe, sie zu kombinieren?
  • Macht Gebrauch <button> Kompatibilitätsprobleme auftreten, da es nicht sehr häufig verwendet wird?

1431
2018-01-22 13:14


Ursprung


Antworten:


  • Hier ist eine Seite Beschreiben der Unterschiede (im Grunde können Sie HTML in eine <button></button>)
  • Und noch eine Seite Beschreiben, warum Menschen meiden <button></button> (Hinweis: IE6)

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

Und während wir über IE sprechen, ist es   habe ein paar Fehler im Zusammenhang mit dem   Breite der Tasten. Es wird geheimnisvoll   fügen Sie zusätzliche Polsterung hinzu, wenn Sie versuchen   Stile hinzufügen, was bedeutet, dass Sie hinzufügen müssen   ein winziger Hack, um die Dinge unterzukriegen   Steuerung.


588
2018-01-22 13:20



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

Bearbeiten - mehr Details

Ohne einen Typ, button implizit erhält Typ von submit. Es spielt keine Rolle, wie viele Übergabeknöpfe oder Eingaben in dem Formular vorhanden sind, von denen jedes, das explizit oder implizit als Übergeben eingegeben wird, wenn es angeklickt wird, das Formular abschickt.

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"

270
2018-04-09 20:13



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 Schaltflächen   erstellt mit dem INPUT-Element, aber   Sie bieten eine reichere Wiedergabe   Möglichkeiten: Das BUTTON-Element darf   habe Inhalt. Zum Beispiel eine Taste   Element, das ein Bild enthält   funktioniert wie und kann einem ähneln   INPUT-Element, auf das der Typ festgelegt ist   "Image", aber der BUTTON-Elementtyp   erlaubt Inhalt.

Das Knopfelement - W3C


159
2018-01-22 13:19



In einem <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 den mit dem <input> Element.


38
2018-03-28 04:27



Zitat

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

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

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


36
2018-01-22 13:18



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


16
2018-03-01 08:17



Ich werde den Artikel zitieren Der Unterschied zwischen Ankern, Eingängen und Schaltflächen:

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

Ein Eingang (<input>) stellt ein Datenfeld dar: also einige Benutzerdaten, die Sie an den Server senden wollen. Es gibt mehrere Eingabearten 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 "Datei"wird zum Hochladen einer Datei verwendet"zurücksetzen"löscht ein Formular und"einreichen"sendet die Daten an den Server. Überprüfen Sie die W3-Referenz auf MDN oder auf W3Schulen.

Das Taste (<button>) Element ist ziemlich vielseitig:

  • Sie können Elemente innerhalb einer Schaltfläche verschachteln, z. B. Bilder, Absätze oder Kopfzeilen;
  • Tasten können auch enthalten ::before und ::after Pseudo-Elemente;
  • Tasten unterstützen die disabled Attribut. Dies macht es einfach zu drehen sie an und aus.

Überprüfen Sie erneut W3 Referenz für <button> Etikett auf MDN oder auf W3Schulen.


16
2017-11-08 14:31