web-dev-qa-db-de.com

<button> vs. <input type = "button" />. Welches verwenden?

Bei der Betrachtung der meisten Sites (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 triftige Gründe, einen anstelle des anderen zu verwenden?
  • Gibt es triftige Gründe, sie zu kombinieren?
  • Ist die Verwendung von <button> mit Kompatibilitätsproblemen verbunden, da sie nicht sehr verbreitet ist?
1565
Aron Rotteveel
  • Hier ist eine Seite Beschreibung der Unterschiede (im Grunde können Sie HTML in einen <button></button> einfügen)
  • nd noch eine Seite Beschreiben, warum Leute <button></button> meiden (Hinweis: IE6)

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

Und während wir über IE sprechen, gibt es ein paar Fehler in Bezug auf die Breite der Schaltflächen. Es wird auf mysteriöse Weise zusätzliche Polsterung hinzufügen, wenn Sie versuchen, Stile hinzuzufügen, was bedeutet, dass Sie einen kleinen Hack hinzufügen müssen, um die Dinge in den Griff zu bekommen.

630
Tamas Czinege

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

Bearbeiten - weitere Details

Ohne einen Typ erhält button IMPLIZIT DEN TYP submit . Es spielt keine Rolle, wie viele Senden-Schaltflächen oder Eingaben sich im Formular befinden. Wenn Sie auf "Senden" klicken, wird das Formular von einer der Schaltflächen oder Eingaben gesendet, die explizit oder implizit als "Senden" eingegeben wurden.

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"
300
Travis J

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 Rendering-Möglichkeiten: Das BUTTON-Element verfügt möglicherweise über Inhalt. Beispielsweise funktioniert ein BUTTON-Element, das ein Bild enthält, wie ein INPUT-Element und ähnelt diesem, dessen Typ auf „Bild“ festgelegt ist, der BUTTON-Elementtyp lässt jedoch Inhalt zu.

Das Button-Element - W3C

167
Noldorin

In ein <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 erstellt wurden.

41
Santhosh

Zitat

Wichtig: Wenn Sie das button-Element in einem HTML-Formular verwenden, übermitteln verschiedene Browser unterschiedliche Werte. Internet Explorer sendet den Text zwischen den Tags <button> und </button>, während andere Browser den Inhalt des value-Attributs 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

37
user54579

Ich zitiere den Artikel Der Unterschied zwischen Ankern, Eingängen und Knöpfen :

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 " file " wird zum Hochladen einer Datei verwendet, " reset "löscht ein Formular und" submit "sendet die Daten an den Server. Überprüfen Sie die W3-Referenz auf MDN oder auf W3Schools .

Das Element button (<button>) ist sehr vielseitig:

  • sie können Elemente innerhalb einer Schaltfläche wie Bilder, Absätze oder Überschriften verschachteln.
  • schaltflächen können auch ::before und ::after Pseudoelemente enthalten.
  • schaltflächen unterstützen das Attribut disabled. Dies macht es einfach, sie ein- und auszuschalten.

Überprüfen Sie die W3-Referenz erneut auf das <button> -Tag auf MDN oder auf W3Schools .

16
Attilio

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 Rendering-Möglichkeiten: Das BUTTON-Element verfügt möglicherweise über Inhalt. Beispielsweise funktioniert ein BUTTON-Element, das ein Bild enthält, wie ein INPUT-Element und ähnelt diesem, dessen Typ auf "image" festgelegt ist, der BUTTON-Elementtyp lässt jedoch Inhalt zu.

16
gimel

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

16
nickomarsa
<button>
  • standardmäßig verhält es sich so, als hätte es ein Attribut "type =" submit "
  • kann sowohl ohne Formular als auch in Formularen verwendet werden.
  • text- oder HTML-Inhalt erlaubt
  • cSS Pseudo Elemente erlaubt (wie: vorher)
  • der Tag-Name ist normalerweise für ein einzelnes Formular eindeutig

vs.

<input type='button'>
  • type sollte auf submit gesetzt werden, um sich als übergebendes 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 problemlos mit CSS formatiert werden. In den meisten Fällen wird jedoch das button -Element bevorzugt, da Sie mit inneren HTML- und Pseudo-Elementen mehr formatieren können

8
Sergey Sklyar

Es gibt einen großen Unterschied, wenn Sie jQuery verwenden. jQuery erkennt mehr Ereignisse an Eingängen als an Schaltflächen. Bei Schaltflächen sind jQuery nur Klickereignisse bekannt. Bei Eingaben sind jQuery Ereignisse wie "Klicken", "Fokus" und "Weichzeichnen" bekannt.

Sie können bei Bedarf jederzeit Ereignisse 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 "Focusin" -Ereignis auftrat, wurde die Funktion durch eine Eingabe ausgelöst, durch eine Schaltfläche jedoch nicht.

8
MattC

Bezüglich des CSS-Stils ist der <button type="submit" class="Btn">Example</button> besser, da er Ihnen die Möglichkeit gibt, CSS :before und :afterPseudoklassen zu verwenden, die helfen können.

Aufgrund der <input type="button"> visuellen Abweichung von <a> oder <span> beim Stylen mit Klassen in bestimmten Situationen vermeide ich diese.

Es ist sehr erwähnenswert, dass aktuelle Top-Antwort im Jahr 2009 geschrieben wurde. IE6 ist heutzutage kein Problem, so dass <button type="submit">Wins</button> die Konsistenz des Stils in meinen Augen an erster Stelle steht.

7
jnowland

<button> ist flexibel, da 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"> hat andererseits keine Wert- oder Erkennungsprobleme, aber Sie können HTML nicht wie mit <button> hinzufügen. Es ist auch schwieriger zu stylen und das Styling reagiert nicht immer auf alle Browser. Hoffe das hat geholfen.

6
Moh S.

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 auch hier ) markieren, was bedeutet, dass sie leer sind kann 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.

4
Roumelis George

darüber hinaus kann einer der Unterschiede vom Anbieter der Bibliothek und deren Code herrühren. Zum Beispiel verwende ich hier die Cordova-Plattform in Kombination mit der mobilen angular Benutzeroberfläche. Während Eingabe-/Div-/etc-Tags mit ng-click gut 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 Antwort von MattC auf dasselbe Problem hinweist: 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 Problemen kommen, bei einem anderen jedoch nicht. und einfach das populäre wie input wird meistens das feste sein, nur weil es populärer ist.

3
deadManN