Das button Element, welches seit HTML 4.0 genutzt werden kann, bietet ein paar Vorteile gegenüber dem input Element, welches mit dem Attribut type="submit" bzw. type="button" ausgezeichnet ist: hinsichtlich der Semantik ist es passender und kann auch weitere Inline-Elemente aufnehmen.
<button type="submit"><strong>Los!</strong></button>
Darüber hinaus könnten Aufschrift und der Inhalt des Parameters, der bei einem Submit übermittelt wird, variieren:
<button type="submit" name="mode" value="edit">ändern</button>
Firefox und Opera übertragen in diesem Fall wie erwartet den Parameter mode=edit. Allerdings übermittelt der Internet Explorer hier nicht den Inhalt des value Attributs, sondern den Inhalt des button Elements, in diesem Fall also mode=ändern! Wer nun nicht auf das button Element verzichten möchte, sollte die betreffende Variable stattdessen über ein hidden input übertragen
<input type="hidden" name="mode" value="edit" />
<button type="submit">ändern</button>
Leider verfügt der Internet Explorer 6 (und älter) hinsichtlich des button Elements über einen noch schlimmeren Bug, der sich bemerkbar macht, wenn mehrere Submit-Buttons in ein Formular eingebaut werden, die beim Submit jeweils einen unterschiedlichen Wert für eine Variable übertragen sollen:
<button type="submit" name="mode" value="preview">Vorschau</button>
<button type="submit" name="mode" value="insert">speichern</button>
Der Internet Explorer 6 überträgt unabhängig vom gewählten Submit-Button alle Werte. Das Browserverhalten im einzelnen, wenn der User den Button "Vorschau" klickt:
- Der IE 6 (und älter) überträgt mode=Vorschau&mode=speichern - das Script wertet den letzten Wert aus, also mode=speichern
- Der IE 7 überträgt mode=Vorschau
- Opera und Firefox übertragen mode=preview
Hier bleibt dem Programmierer nur, auf das herkömmliche input Element auszuweichen (und damit auf die Vorzüge von <button> zu verzichten) oder mithilfe von JavaScript dem IE das gewünschte Verhalten beizubringen. Einige JavaScript-Lösungen, den value Wert zu übertragen und/oder die nicht geklickten Submit-Buttons zu deaktivieren, sind in den Kommentaren zu diesem Blogeintrag auf peterbe.com aufgeführt: Button tag in bloody Internet Explorer.