it-swarm.com.de

Welche Nachteile hat das <button> -Tag?

Ich fing an, ein diagnostisches CSS-Stylesheet zu verwenden, z. B. http://snipplr.com/view/6770/css-diagnostics--highlight-deprecated-html-with-css--more/

Eine der vorgeschlagenen Regeln hebt Eingabe-Tags mit dem Typ submit hervor, wobei die Verwendung von <button> als semantischere Lösung empfohlen wird. Was sind die Vor- oder Nachteile von <button> mit type submit (z. B. mit Browserkompatibilität), auf die Sie gestoßen sind?

Um klar zu sein, ich verstehe die Spezifikation von <button>, es hat einen definierten Anfang und ein Ende, es kann verschiedene Elemente enthalten, wohingegen die Eingabe ein Singlet ist und nichts enthalten kann. Ich möchte im Wesentlichen wissen, ob es kaputt ist oder nicht. Ich würde gerne wissen, wie benutzbar die Schaltfläche zum aktuellen Zeitpunkt ist. Die erste Antwort scheint zu implizieren, dass sie außerhalb der Formulare leider nicht verwendet wird.

Edit für 2015

Die Landschaft hat sich verändert! Ich habe jetzt 6 Jahre Erfahrung im Umgang mit Button und die Browser haben sich von IE6 und IE7 etwas weiterentwickelt. Also füge ich eine Antwort hinzu, die ausführlich beschreibt, was ich herausgefunden habe und was ich vorschlage.

64
Kzqai

Beantworten aus einer ASP.NET-Perspektive.

Ich war aufgeregt, als ich diese Frage und etwas Code für ein ModernButton-Steuerelement fand, das letztendlich ein <button>-Steuerelement ist.

Also habe ich angefangen, alle möglichen Schaltflächen hinzuzufügen, die mit <img />-Tags versehen sind, um sie hervorzuheben. Und es hat alles super geklappt ... in Firefox und Chrome.

Dann habe ich den IE6 ausprobiert und den "potenziell gefährlichen Request.Form-Wert wurde erkannt" erhalten, da der IE6 die HTML-Datei in den Button einschickt, der in meinem Fall HTML-Tags enthält. Ich möchte das validateRequest-Flag nicht deaktivieren, da mir dieses hinzugefügte Datenvalidierungsbit gefällt.

Also habe ich Javascript geschrieben, um diese Schaltfläche zu deaktivieren, bevor das Senden erfolgte. Funktionierte gut auf einer Testseite mit einem Knopf, aber als ich es auf einer echten Seite ausprobierte, die andere <button>-Tags hatte, sprengte es erneut. Weil der IE6 ALLE HTML-Dateien der Buttons übergibt. Nun habe ich alle Arten von Code, um die Schaltflächen vor dem Senden zu deaktivieren.

Gleiche Probleme mit IE7. IE8 hat dies zum Glück behoben.

Yikes Ich würde empfehlen, diesen Weg nicht zu gehen, WENN Sie ASP.NET verwenden.

Update:

Ich habe dort eine Bibliothek gefunden, die verspricht, das Problem zu beheben.

Wenn Sie das ie8.js-Skript aus dieser Bibliothek verwenden: http://code.google.com/p/ie7-js/

Es könnte gut funktionieren. Die IE8.js bringt IE5-7 mit IE8 mit dem Button-Tag auf Touren. Der übergebene Wert wird zum tatsächlichen Wert, und es wird nur eine Schaltfläche übergeben.

17
slolife

Wenn Sie <button> verwenden, geben Sie immer den Typ an, da Browser unterschiedliche Typen verwenden.

Dies funktioniert konsistent für alle Browser:

  • <button type="submit">...</button>
  • <button type="button">...</button>

Auf diese Weise erhalten Sie die ganze Güte von <button>, keine Nachteile.

49
orip

Alles, was Sie wissen müssen: W3Schools <button> Tag

Das Tag wird in allen gängigen Browsern unterstützt.

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

13
David Brown

Pros:

  • Das Anzeigelabel muss nicht mit dem übermittelten Wert übereinstimmen. Großartig für i18n und "Diese Zeile löschen"
  • Sie können Markierungen wie <em> und <img> einschließen.

Nachteile:

  • Einige Versionen von MSIE verwenden standardmäßig type="button" anstelle von type="submit", daher müssen Sie explizit sein
  • Einige Versionen von MSIE behandeln alle <button>s als erfolgreich, so dass Sie nicht erkennen können, auf welche geklickt wurde
  • Einige Versionen von MSIE übermitteln den Anzeigetext anstelle des tatsächlichen Werts

Von https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button :

IE7 hat einen Fehler, bei dem beim Senden eines Formulars mit Click me die gesendeten POST - Daten zu myButton = Click me statt myButton = foo ..__ führen. IE6 hat einen noch schlimmeren Fehler, bei dem das Senden eines Formulars über eine Schaltfläche ALLE Schaltflächen des Formulars mit demselben Fehler wie IE7 ..__ sendet. Dieser Fehler wurde in IE8 behoben.

10
Quentin

Eine wichtige Besonderheit: In einem Formular, das ein <button/>-Element enthält, senden IE6 und IE7 das Formular nicht, wenn auf das <button/>-Element geklickt wird. Andere Browser hingegen senden das Formular ab.

Im Gegensatz dazu wird kein Browser das Formular senden, wenn auf <input type="button"/>- oder <button type="button"/>-Elemente geklickt wird. Und natürlich senden alle Browser das Formular, wenn Sie auf <input type="submit"/>- oder <button type="submit"/>-Elemente klicken.

Wie in der Antwort von @ orip gesagt wird, verwenden Sie immer <button type="button" /> oder <button type="submit" /> innerhalb eines <form/>-Elements, um ein konsistentes Übergabeverhalten für Browser zu erhalten. Lassen Sie das type-Attribut niemals aus.

9
Chris Calo

Ich habe einige Erfahrung mit den Macken von <button> gemacht, jetzt, 6 Jahre später, hier sind meine Vorschläge:

  • Wenn Sie still IE6 oder IE7 unterstützen, seien Sie mit button sehr vorsichtig. Das Verhalten ist bei diesen Browsern sehr fehlerhaft. In manchen Fällen müssen Sie innerHtml anstelle von value = 'what' angeben. und alle Schaltflächenwerte statt nur eines und ungewolltes Verhalten. Testen Sie also gründlich oder vermeiden Sie diese Browser.

  • Andernfalls: Wenn Sie weiterhin IE8 unterstützen, funktioniert <a href='http://example.com'><button></button></a> nicht gut und wahrscheinlich auch sonst, wenn Sie eine Schaltfläche in einem anklickbaren Element verschachteln. Also pass auf das auf.

  • Andernfalls: Wenn Sie einen <button> hauptsächlich als Element zum Klicken für Ihr Javascript verwenden und es sich außerhalb eines Formulars befindet, machen Sie es <button type='button'> und Sie werden wahrscheinlich in Ordnung sein!

  • Andernfalls: Wenn Sie <button> in einem Formular verwenden, ist zu beachten, dass der Standardtyp <button> in (den meisten) Fällen tatsächlich <button type='submit'> ist. Geben Sie daher Ihren Typ und Ihre value explizit an, beispielsweise <button type='submit' value='1'>Search</button>.

Beachten Sie Folgendes: Wenn Sie eine button-mimic-Klasse verwenden, wie Bootstrap .btn, können Sie einfach Dinge wie <div> oder <a> oder sogar <button> genau so aussehen, wie Sie es möchten, und im Fall von <a> ein nützlicheres Fallback-Verhalten haben. Keine schlechte Wahl.

TLDR; Ok zu verwenden, wenn Sie sich nicht für alte Browser interessieren, aber Bootstrap bietet noch robustere CSS-visuell ähnliche Alternativen, die einen Blick wert sind.

5
Kzqai

Ist es kaputt oder nicht:

Wie üblich lautet die Antwort "es funktioniert gut in allen gängigen Browsern, hat aber die folgenden Macken im IE." Ich glaube nicht, dass dies ein Problem für Sie sein wird.

Das <button>-Tag wird von allen gängigen Browsern unterstützt. Das einzige Supportproblem besteht darin, was Internet Explorer beim Drücken einer Schaltfläche übermittelt.

Die wichtigsten Browser senden den Inhalt des value-Attributs. Der Internet-Exploter übermittelt den Text zwischen den <button>- und </button>-Tags und übermittelt auch den Wert aller anderen im Formular, nicht nur den von Ihnen angeklickten.

Für Ihre Zwecke, nur alte HTML-Dateien bereinigen, sollte dies kein Problem sein.

Quellen:

  1. http://www.peterbe.com/plog/button-tag-in-IE
  2. http://www.w3schools.com/tags/default.asp
4

Hier ist eine Website, die die Unterschiede erklärt: http://www.javascriptkit.com/howto/button.shtml

Grundsätzlich erlaubt das Eingabe-Tag nur Text (obwohl Sie ein Hintergrundbild verwenden können), während Sie mit der Schaltfläche Bilder, Tabellen, Divs und andere Elemente hinzufügen können. Außerdem muss es nicht in einem Form-Tag verschachtelt sein.

1
Chris Haas

Sie könnten auch auf diese Probleme stoßen:

Eine andere Sache hängt mit dem Styling der Schiebetürtechnik zusammen: Sie müssen ein anderes Tag einfügen, z. <span>, damit es funktioniert.

1
moey

für mich ist der Unterschied zwischen Submit- und Button-Tags folgender: gibt Ihnen die Möglichkeit, einen anderen Text als den Wert des Elements anzuzeigen

Nehmen wir an, Sie haben eine Liste von Produkten und dann neben jedem Produkt, für das Sie eine Schaltfläche hinzufügen möchten, um es dem Warenkorb des Kunden hinzuzufügen:

product1 : <add to cart>
product2 : <add to cart>
product3 : <add to cart>

dann könntest du das machen:

<button name="buy" type="submit" value="product2"> add to cart </button>

Das Problem ist nun, dass IE das Formular mit value = "add to cart" anstelle von value = "product2" sendet.

Der einfachste Weg, dieses Problem zu lösen, ist das Hinzufügen von onclick = "this.value = 'product2'".

Also das:

<button name="buy" type="submit" value="product2" onclick="this.value='product2'"> add to cart </button>

macht den Trick auf allen gängigen Browsern - ich habe dies tatsächlich auf einem Formular mit mehreren Schaltflächen verwendet und funktioniert mit Chrome Firefox und IE

0
George Panic