Submit-Button mit icon

[hpvw]

Ich habe vor, einen normalen Submitbutton mit einem Icon auszustatten.
Folgender Code funktioniert "fast" einwandfrei.

<input style="
    background-image:url('./offnen.gif');
    background-repeat:no-repeat;
    background-position:2px 0px;
    padding-left:20px;
    " type="submit" name="action" value="Öffnen">

offnen.gif ist ein 16x16 Pixel großes gif mit Transparenz.
Unter Windows 2000 mit IE und Firefox erscheint ein Standard W2k Button mit dem Icon und dem Text.
Unter Windows XP mit Firefox erscheint erscheint ein Button, der wie ein W2k Button aussieht, auch mit korrektem Icon. Damit könnte ich leben. Aber leider macht er unter WindowsXP mit dem IE einen Standard XP Button (dieses blaue stylische Ding) aber ohne das Icon. Den Platz fürs Icon hält er durch padding-left aber frei.
Eigentlich war es so gedacht, das er immer den OS-typischen Button mit Icon nimmt.
Hat jemand eine Idee, wie man das ohne das button-tag lösen kann?
Das Button-tag kann (will) ich nicht benutzen, weil man mit JavaScript arbeiten muss und die Übergabe von name und value nicht auf allen Browsern richtig funktioniert.
Wenn da keiner eine Idee hat, werde ich wohl auf die "OS-Konsistenz" verzichten und meine eigenen Buttons gestalten, dann macht auch der IE unter WinXP alles richtig. Wär aber schade.
Auf dem Mac und unter Linux kann ich das leider nicht testen, aber meine User arbeiten eh unter Windows ("geschlossener" Benutzerkreis, keine öffentliche HP).

Danke hpvw

 

[HUBBLE]

Ich hab mir nicht alles durchgelesen, aber mach doch einfach so:

<FORM NAME="Formular" ACTION="eintrag.php" METHOD="Post">

....

<A HREF="#" ONCLICK="document.Formular.submit()"><IMG SRC="bild.gif" BORDER=0></A>

</FORM>

 

[hpvw]

Ist sicher 'ne Möglichkeit.
Widerstrebt mir jedoch
1. wegen dem JavaScript und
2. weil ich die inputs wegen name und value benötige.
In dem formular tauchen mehrere Buttons auf und ich muss wissen, welcher gedrückt wurde und das am besten ohne JavaScript.

Die Lösung sollte schon diese Bedingungen erfüllen, ansonsten muss ich die Buttons halt komplett selbst gestalten und nicht so, dass jeder User sie entsprechend seines OS bekommt, dann klappts nämlich.

Mit <button> gehts auch, aber der lässt sich nicht richtig ohne JavaScript zum abschicken verwenden, da als value nicht das Attribut, sondern der Inhalt (zwischen <button> und </button>) verwendet wird. Das wäre mit PHP mühsam herauszufinden.

Einmal konkret, zwei mögliche Lösungen, die ich mir vorstellen könnte (realisierbar ohne JavaScript?):
1. Dem normalen Input-Button ein Icon verpassen, aber wie?
2. Dem Button klarmachen, dass er das value-Attribut und nicht den Inhalt zwischen <button> und </button> sendet, aber wie?

 

[hpvw]

Noch mal zu <button>:
Habe jetzt raus, das Firefox immer das value übergibt, wenn nicht angegeben lässt er das Feld leer und der IE nimmt immer den Inhalt, egal ob value angegeben ist oder nicht.
Wie kann man das über die Browser hinweg einheitlich erzwingen (natürlich ohne JavaScript)? Dann hätte ich die Lösung.

 

[hpvw]

Vedrammt!
<button> wird nicht funktionieren.
Der IE übermittelt alle Inhalte von allen <button> im Formular und nicht nur den vom geklickten Button, wie er es mit <input type="submit"> macht.
Warum arbeiten die Browser nur so inkonsistent?
Beim w3c habe ich zur Übermittlung der Daten nur das gefunden:
Beim w3c ist zu HTML4 ausgerechnet zu <button> nichts gesagt, <input type=submit> ist festgelegt (nur der geklickte Button soll übermittelt werden). Bei xhtml konnte ich gar nichts finden. Weiss da jemand näheres?

 

[Sebastian Wramba]

Ist sicher 'ne Möglichkeit.
Widerstrebt mir jedoch
1. wegen dem JavaScript und
2. weil ich die inputs wegen name und value benötige.

Was hast du gegen Javascript? ... Du kannst statt des value-Übergebens per Button auch ein hidden-input-Feld mit ins Formular packen.

Statt folgendem:

<form name="Form1" method="post">

<!-- Formularfelder -->

<input type="submit" name="button1" value="Abschicken" />

</form>

... folgendes:

<form name="Form1" method="post">

<!-- Formularfelder -->

<input type="hidden" name="button1" value="Abschicken" />

</form>

<img src="offnen.gif" onclick="document.Form1.submit()" />

 

[hpvw]

Das gute an den <input> Buttons ist, dass deren name und value nur übermittelt wird, wenn er geklickt wurde. Das ermöglicht es, mehrere Buttons in einem Formular zu verwenden, die dann jeweils unterschiedliche Aktionen im auswertenden Skript auslösen (z.B. Vorschau und Speichern) und trotzdem alle sonstigen Eingabefelder mit übermitteln (außer die anderen <input type=submit>).

Gegen JavaScript habe ich, dass es auf vielen Seiten verwendet wird, um nervige Popups auf den Monitor zu zaubern oder sonstwie für Werbung o.ä. mein Surfverhalten stören. Popup-blocker helfen übrigends nicht gegen alle Möglichkeiten. Außerdem treten immer wieder Sicherheitslücken im Zusammenhang mit JavaScript auf, auch wenn es theoretisch nicht möglich ist.
Im Übrigen nervt es mich, wenn eine Seite nur mit JavaScript funktioniert.
Aber das ist wohl eine Grundsatzdiskussion, zu der jeder seine persönliche Meinung hat.
Wenn es Dinge gibt, bei denen JavaScript nur unterstützend ist und nicht zwingend erforderlich (z.B. einfügen von vBCode) baue ich es auch gerne ein, aber es muss auf jeden Fall auch ohne JavaScript möglich sein, eine Seite zu benutzen.

Gruß hpvw