Der Internet Explorer und das button Element

05.03.2007 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:

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.