# Formular-Schaltflächen



## wenco (9. März 2005)

Hallo,
ich habe ein Schönheitsproblem   

Also ich habe ien Formular und möchte neben den Standartschaltflächen:
Zurücksetzen und Senden auch noch einen grafisch gleichen Drucken-Button haben.
Nun habe ich diesen getürkt und als img/Grafik reingesetzt, nicht bedenkend, dass andere Browser (wie Safarie) die Standartbuttons ja anders anzeigen....

Nun meine Frage: Gibt es eine Möglichkeit ein Formularbutten so zu programmieren, dass es druckt? (Ich hab es nicht hingekriegt) O D E R
Gibt es die Möglichkeit Formularbuttons durch Grafíken zu ersetzen?

Danke wenco


----------



## Fabian H (9. März 2005)

Folgender Button wird als Bild dargestellt und uebernimmt die Funktion des Submit Buttons:

```
<input type="image" src="submit.png" alt="Abschicken" />
```


----------



## SilentWarrior (10. März 2005)

> Gibt es eine Möglichkeit ein Formularbutten so zu programmieren, dass es druckt?




```
<button name="Drucken" type="button" value="Diese Seite ausdrucken" onclick="window.print()">
<img src="print.png" width="20" height="20" alt="Diese Seite ausdrucken" border="0" />
</button>
```


----------



## Gumbo (10. März 2005)

Damit es die nicht JavaScript-Benutzer nicht verwirrt, sollte dein Lösungsvorschlag auch erst mittels JavaScript in das Dokument implementiert werden.


----------



## wenco (10. März 2005)

WOW, vielen Dank für eure schnellen Antworten.
Ich probier alles aus und meld mich dann nochmal.

Danka wenco


----------



## wenco (10. März 2005)

Beide Möglichkeiten habe ich hinbekommen. Das ist doch mal ne Entscheidungsgrundlage.
Vielen Dank nochmal.

wenco


----------



## Golz (10. März 2005)

Hi,

ich hol den Beitrag mal wieder hoch, weil ich auch an diesem Problem arbeite. Aber mein Problem iss ein bissle größerer Natur ^^

also folgendes:

ich hab den Vorschlag vom SilentWarrior mal benutzt.


```
<SCRIPT LANGUAGE="JavaScript">
pic = new Image();
pic.src = "login2.bmp";
</SCRIPT>
```


```
<button type="submit" onMouseOver="login1.src='login2.bmp';" onMouseOut="login1.src='login1.bmp';" src="login1.bmp" border-color:#FFFFFF; background-color:#FFFFFF" ><img src="login1.bmp" alt="Submit" name="login1" height="22" width="55"></button>
```

Ich hab halt noch ein bissle JavaScript mit eingebaut, dass die Bilder nicht so starr sind.

aber wenn ich es so mache, dann erstellet er einen Button und setzt das Bild in die Mitte rein aber ich finde das nicht so schön, da mein Butto ja schon in Form eines Bildes existiert. ich kann es aber auch nicht mit einer Verlinkung machen, da ich ja eine SUBMIT brauche.


hat da einer eine Idee wie man das Problem lösen kann?

Vielen Dank

Gruß

Patrick


----------



## SilentWarrior (10. März 2005)

> aber wenn ich es so mache, dann erstellet er einen Button und setzt das Bild in die Mitte rein aber ich finde das nicht so schön, da mein Butto ja schon in Form eines Bildes existiert.


Das soll ja auch so sein. Das, was zwischen <button> und </button> steht, wird genau so in dem Button angezeigt. Wenn du da ein "normales" Bild drin haben willst, dann schnapp dir ein Bildbearbeitungsprogramm und ändere dein Bild.

Ich hab aber ehrlich gesagt nicht so ganz verstanden, was du genau meinst. Ein Link oder ein Screenshot wäre nett.


----------



## Golz (11. März 2005)

kann ich leider beides nicht, weil ich keinen webserver habe  das ist alle für Interne Seiten gedacht bzw. für ein Schulprojekt.

meine Bilder sehen schon aus wie win Button, deswegen.

wenn ich zwischen <button> und </button> was schreibe, dann macht er mir nochmal einen button um nein Bils aber es entsteht ein rand . naja egal 

kann ich auch via <a href="" .....  ein Submit erzeugen? 

weil da klappt es mit dem Button. ich brauch halt ein Submit um des ganze weiter schicken zu können. statische Links habe ich kaum drin.


----------



## SilentWarrior (11. März 2005)

> kann ich auch via <a href="" ..... ein Submit erzeugen?


Kannst du machen. Der Code dazu sähe folgendermassen aus:
	
	
	



```
<form id="myform">
...
<a href="javascript:document.gelementbyid('myform').submit();"><img src="..."></a>
</form>
```
Ich verstehe aber immer noch nicht, was du genau meinst mit "dann macht er mir nochmal einen button" - bei mir funktioniert das wunderbar:

http://de.selfhtml.org/html/formulare/anzeige/button.htm


----------



## Golz (11. März 2005)

Vorwort:

Ich erstelle einen Butto mit 

```
<input type="button"...
```

mache einen screenshot davon, packe den in eine BMP Datei, wandle diese in eine JPG Datei um und fertig iss der eigen gemachte Button.


Erklärung:

Soderle jetzt machen wir mit

```
<button>
...img...
</button>
```
einen Button. als Bild machen wir eins der vorher generierten Bilder (siehe oben) rein.

dan Sieht das wie aus? ja genau SCHE......

ok jetzt machen wir mal ein

```
<a href.....>img...</a>
```

dann sieht das aus wie ein Button erstellt mit

```
<input type="button"...
```
aber halt mit direktlink 

deswegen auch meine Frage nach dem Submit in hrefs ^^



Du hast mir echt geholfen 

THX


Grüßle

Patrick



P.S.
ich hab da noch was vergessen ^^

ich möchte ja auch, dass es 2 Bilder aufeinander sind. bzw. wenn ich über den Button fahre soll das 2 Bild erscheinen. das habe ich geschafft aber des mit dem Submit passt mmer noch net. er reagiert überhaupt nicht.


----------



## SilentWarrior (11. März 2005)

> mache einen screenshot davon, packe den in eine BMP Datei, wandle diese in eine JPG Datei um und fertig iss der eigen gemachte Button.


Ja, das hab ich schon verstanden. Aber: Warum zum Geier machst du das? Du kannst mit meinem Code prima direkt aus einem Bild einen Button erstellen, ohne erst mühsam Screenshot, Bildbearbeitungsprogramm usw. Ich versteh's einfach nicht, tut mir leid. Aber naja, wenn du jetzt glücklich bist, was soll's.


----------



## Gumbo (11. März 2005)

„Form follows Function“: Anzumerken sei, dass die Variante mithilfe des a-Elements nicht besonders plattformunabhängig ist, da diese die JavaScript-Unterstützung voraussetzt. Die anderen Varianten wäre jedoch auch ohne JavaScript-Unterstützung benutzbar.


----------



## Golz (11. März 2005)

ok ich geh mal auf deinen Vorschlag ein. aber wie kann ich dann dem Button saen, dass er keinen Hintergrund mehr haben soll und auch keinen Rahmen mehr?

geht das? dann währ ich auch glücklich ^^


----------



## Gumbo (11. März 2005)

Sagen kannst du ihm das nicht. Du kannst ihm jedoch mit CSS eine Eigenschaft zuweisen, bei der keine Grenzen sichtbar sind.
	
	
	



```
border-style: none
```


----------



## SilentWarrior (11. März 2005)

> wie kann ich dann dem Button saen, dass er keinen Hintergrund mehr haben soll


Tja, ich fürchte, da wird dir nichts anderes übrig bleiben, als das Bild als GIF/PNG mit transparentem Hintergrund zu speichern.


----------



## wenco (11. März 2005)

<button name="submit" type="submit" value="Senden" src="dein_bild.gif">
</button>

MEINS DU DAS Golz?
wenco


----------



## wenco (20. Juli 2005)

Hallo,
ich muss dieses Thema nocheinmal aufgreifen, weil ich in einer neuen Internetseite neue Probleme habe.Ich habe einen Styleswitcher nachgebaut, bei dem man per Formularbutton zwischen CSS-Dateien wählen kann. (Außerdem wird noch zwischen Browsern unterschieden.) Soweit funktioniert auch alles wunderbar. 

Ich habe nun aber die Vorgabe, dass als Linkbild / Schaltfläche ein bestimmtes Bild dienen soll. Für Netscape und Fireworks habe es ich auch geschafft den Button folgender maßen zu verändern: 

<input type="image" src="images/kontrast.gif"   name="stil" value="css/kontrast"  class="button"/>

Aber für den IE funtioniert garnichts, auch nicht <button></button>. Es zerstört sogar die ganze Funktionallität. Was kann ich tun? Wichtig für mein PHP-Script sind die Parameter 
name="stil" value="css/kontrast"  

und der IE benötigt offennsichtlich noch type="submit", desshalb funktioniert type="image"
auch nicht. So jetzt hofe ich dass ich ich zu konfus war und diesen Beitrag überhaupt noch jemand liest.

wenco


----------



## Gumbo (20. Juli 2005)

Wieso sollte das nicht funktionieren? Wie ist denn das Formular aufgebaut?


----------



## wenco (20. Juli 2005)

Also das ist ein Formular mit Buttons, mit denen man CSS-Dateien switchen kann z.B. Normalansicht und Kontrastansicht. Außerdem wird noch zwischen IE und den anderen Browsern unterschieden. Hier ein Ausschnitt aus dem Formular:

<form action="<? echo $_SERVER['PHP_SELF'] ?>" method="post">
 <?php
 if (strstr($HTTP_USER_AGENT,"MSIE")) { 
 print( '<input type="submit" name="stil" value="css/layout_ie" /> ');
 }
else{
 print( '<input type="image" src="images/plus.gif" name="stil" value="css/layout"  />  ');
}
?>
</form>


----------

