<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

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

Verankerungen (die <a> Element) stellen Hyperlinks dar, Ressourcen, zu denen eine Person in einem Browser navigieren oder die sie herunterladen kann. Wenn Sie Ihrem Nutzer ermöglichen wollen, 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 mehrere Eingabetypen, die mit Schaltflächen verbunden sind:

• <input type="submit">
• <input type="image">
• <input type="file">
• <input type="reset">
• <input type="button">

Jedes von ihnen hat eine Bedeutung, zum Beispiel " archivo " wird zum Hochladen einer Datei verwendet, " zurücksetzen " löscht ein Formular, und " einreichen " sendet die Daten an den Server. W3-Referenz prüfen auf MDN o auf W3Schools .

Le site Taste ( <button>) Element ist sehr vielseitig:

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

Prüfen Sie erneut die W3-Referenz für <button> Tag auf MDN o auf W3Schools .

Answer 2

Auch wenn diese Frage sehr alt ist und vielleicht nicht mehr aktuell ist, sollten Sie bedenken, dass die meisten Probleme, die die <button> Tag zu haben, gibt es nicht mehr und daher ist es sehr ratsam, ihn zu verwenden.

Falls Sie dies aus verschiedenen Gründen nicht tun können, denken Sie einfach daran, das Attribut role="button" in Ihrem Tag als Zugänglichkeit hinzuzufügen. Dieser Artikel ist sehr informativ: https://www.deque.com/blog/accessible-aria-buttons/

Answer 3

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

Answer 4

<button>

• verhält sich standardmäßig so, als ob es ein "type="submit"-Attribut hätte
• kann sowohl ohne Formular als auch in Formularen verwendet werden.
• Text- oder HTML-Inhalt erlaubt
• css-Pseudoelemente erlaubt (wie :before)
• Der Tag-Name ist in der Regel eindeutig für ein einzelnes Formular

vs.

<input type='button'>

• type sollte auf 'submit' gesetzt werden, um sich wie ein übermittelndes Element zu verhalten
• kann nur in Formularen verwendet werden.
• nur Textinhalte erlaubt
• keine css-Pseudoelemente
• derselbe Tag-Name wie bei den meisten Formularelementen (Eingaben)

--
in modernen Browsern sind beide Elemente leicht mit CSS zu gestalten, aber in den meisten Fällen, button Element ist vorzuziehen, da man mit inneren HTML- und Pseudoelementen mehr gestalten kann

Answer 5

Was das CSS-Styling angeht, so ist die <button type="submit" class="Btn">Example</button> ist besser, da es Ihnen die Möglichkeit gibt, CSS zu verwenden :before y :after Pseudoklassen die helfen können.

Aufgrund der <input type="button"> visuell anders als ein <a> o <span> Wenn ich in bestimmten Situationen mit Klassen gestylt werde, vermeide ich sie.

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