IE Bug: Grafische Submit-Buttons in Formularen

Tags: | |

Die Aufgabe:

Sie wollen ein Formular mit einem Grafik-Submit-Button versehen.

Für diese Aufgabe wurde mit HTML 4.0 das Button-Element eingeführt und ein entsprechender Button wird wie folgt dargestellt:

<button type="submit" name="action" value="post">
<img src="post.png" alt="Absenden" />
</button>

Wie zu erwarten ist, senden die Browser in diesem Fall die Parameter action=post. Der Internet Explorer aber übermittelt nicht den Inhalt des value Attributs, sondern den Inhalt des button Elements, in diesem Fall also

action=<img src="post.png" alt="Absenden" />!

Braucht man den value von action aber zur Weiterverarbeitung, muss man nun
ein weiteres Feld vom Typ „hidden“ anlegen und dort den Wert setzen:

<input type="hidden" name="action" value="wert" />

Alternativ bietet sich folgende Lösung an:

<input name="submit" type="image" value="wert" src="bild.png" alt="Absenden" />

Soweit so gut, doch wenden wir uns nun dem viel schlimmeren Bug des IE (Internet-Explorers zu:

Sie brauchen in ihrem Formular 2 verschiedene grafische Submit-Buttons (z.B. einen für Vorschau, einen zum Absenden) – eine typische Aufgaben-Stellung bei der vollständigen Implementierung eines eigenen Layouts in die Foren-Software phpBB.

An dieser Stelle gehen die Probleme los. Was der Firefox problemlos bewältigt, fördert beim Internet-Explorer einen tollen Bug (engl. Fehler) zu Tage:

Eigene Grafik-Submit-Buttons in einem Formular

Die Buttons sehen zwar gut aus, aber der IE weigert sich hartnäckig, ihnen eine Funktion zu verleihen. Submit-Buttons innerhalb eines Formulars bearbeitet der Internet Explorer schlicht und einfach gar nichts, wenn es sich bei den Submit-Buttons um Grafik-Buttons handelt.

Sie haben jetzt mehrer Optionen:

1. Lösungsweg:

Sie verzichten auf grafische Submit-Buttons und formatieren die Buttons mittels CSS.

2. Lösungsweg:

Mittels eines kleinen Java-Scripts wird der richtige Wert in zwei Feldern vom Typ „hidden“ gesetzt:
Als „Grundzustand“ ist der Wert für „Absenden“ gesetzt, mittels onclick wird der Wert für „Vorschau“ gesetzt und der Wert für „Absenden“ gelöscht.
Diese Lösung hat den Nachteil, daß der Vorschau-Buttons nicht funktioniert, wenn JavaScript nicht aktiviert ist. Die wichtigste Funktion (das Absenden des Formulars) ist aber immer vorhanden:

<input name="preview" type="image" value="preview"
  src="preview.png" alt="Vorschau"
  onclick="preview.setAttribute('value','preview');
              post.setAttribute('value','');" />
<input type="hidden" name="preview" value="" />
<input name="post" type="image" value="post" src="send.png" alt="Absenden" />
<input type="hidden" name="post" value="post" />

Mehr zum Thema:

Ein Kommentar zu “IE Bug: Grafische Submit-Buttons in Formularen”

  1. aggi meint:

    danke, wusst ich vorher nich. jetzt funzt mein formular auch im iE

Hinterlassen Sie einen Kommentar

Text-Formatierung: Sie können diese XHTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> benutzen.

Comments links could be nofollow free.