 Formular-Button als Grafik
Buttons müssen nicht langweilig sein. Sie sind nicht an den üblichen Button gebunden, der ohnehin in den Browsern nicht gleich aussehen. Eigene Grafiken, CSS-Formatierung und auch alternierende Texte sind möglich.
Statt eines grauen Standard-Formularbuttons können sie ihre eigene Grafik einbinden. Wenn sie ihren eigenen grafischen Button kreieren, ist die Anpassung an ihr Seitenlayout leichter. Auch mit einer CSS-Formatierung haben sie Einfluss auf Größe, Form und Farbe.
 Buttons formatieren mit CSS 01 Buttons formatieren mit CSS 02
Üblicher Formularbutton
So sieht der übliche Befehl für den Sendebutton aus. Im Input-Tag für den Sende-Butten steht das Attribut 'submit'. Damit wird ein üblicher Button festgelegt.
<input type="submit" name="button1" value=" senden ">
So sieht der übliche Befehl für den Resetbutton aus. Im Input-Tag für den Reset-Butten steht das Attribut 'reset'. Damit wird ein üblicher Button festgelegt.
<input type="reset" name="button1" value=" löschen ">
Grafik als Button
Der Code für den grafischen Button ihrer Wahl. Durch das Attribut 'image' im Input-Tag bestimmen sie einen grafischen Butten, für den sie allerdings in einem weiteren Attribut die Quelle (src) festlegen müssen.
<input type="image" src="b-uebertragen.gif" border="0">
a) Grafik einbinden
Wie sie im nächsten Beispiel sehen, wird für den Button der Wert des Attributs 'value' ignoriert. In dieser Notierung erscheint lediglich die Grafik ohne Einfluss auf Höhe und Breite. Wenn der Button selbst keine Beschriftung hat, erscheint er auch ohne Text.
<input value="Abschicken" type="image" src="b200-16.gif">
b) Button einbinden
Dieser Button ist eher geeignet. Er hat eine Beschriftung und liegt in genau den Abmessungen (20 x 160 Pixel) vor, wie er benötigt wird.
<input type="image" src="abschicken.gif">
c) Button einbinden (mit Rand)
Dem Button wird noch ein Rand 'verpasst'. In Diesem Beispiel ein 1px breiter an allen 4 Kanten gleichfarbiger Rand.
<input style="border:1px solid #000000" type="image" src="abschicken.gif">
| 
WWW.WEB-TOOLBOX.NET
ZURÜCK