Formular-Schaltflächen gestalten

Niemand ist auf Einheitsgrau angewiesen. Es gibt durchaus Möglichkeiten mehr aus den langweiligen Formular-Knöpfen herauszuholen. Mit ein wenig Phantasie und den richtigen Codes passen auch Formulare in ein schickes Seitenlayout.

Einheitliche Breite bei mehreren Schaltflächen (für alte Browser)
Der verschiedenen Browser wegen muss hier "doppelt gemoppelt" werden.

<INPUT TYPE="Submit" style="WIDTH:140px;" WIDTH="140" NAME="submit" VALUE="abschicken">

Der "style" wird vom Internet Explorer interpretiert, "WIDTH" vom NS Netscape Navigator. Es gibt weitere Alternativen:

  • Setzten Sie die Schaltflächen nebeneinander - dann fällt es nicht auf.
  • Grafische Schaltflächen
  • Maskierte Leerzeichen verwenden, um die Elemente voneinander zu trennen.

Aufschriften der Schaltflächen verändern
Die Aufschrift einer Schaltfläche ändern Sie so:

<input type="submit" name="Submit" value="Aufschrift - Ihr Text">

Auf den Reset (Löschen) Button können Sie in den meisten Fällen verzichten. Tatsächlich das sogar eine gute Idee. Viel zu groß ist die Gefahr, dass man nach dem Ausfüllen die möglicherweise identisch aussehenden Schaltflächen verwechselt. Ihre Gäste wären nicht begeistert.

Schaltflächen optisch aufwerten
Besonders trübe und langweilig wirken die Schaltflächen zum Absenden des Formulars (Submit-Button). Hier lässt sich mit etwas CSS nachhelfen. Und wer will, kann die Schalfläche gegen ein beliebige Grafik austauschen, damit steht Ihnen dann die ganze Palette interessanter Gestaltungen zur Verfügung.

Standard

<input type="submit" name="button" value="Abschicken">

Orangefarbener Hintergrund

<input type="submit" name="button"
style="BACKGROUND-COLOR: #ff9900;"
value="Abschicken">

Orangefarbener Hintergrund mit Balken oben und unten

<input type="submit" name="button"
style="BACKGROUND-COLOR: #ff9900;
border-bottom-color: black;
border-top-color: black;"
value="Abschicken">

Weißer Hintergrund mit roter Schrift

<input type="submit" name="button"
style="BACKGROUND-COLOR: white;color : red;"
value="Abschicken">
</form>

Grafik
Und so wechseln Sie die Schaltfläche durch Ihre eigene Grafik aus:

<input type="image"
name="click and go" src="submit.gif" alt="abschicken"
align="bottom" border="0" width="79" height="19">

Mittels Javascript haben Sie zumindest theoretisch die Möglichkeit, auch den Reset-Button auszuwechseln. Ebenso können Sie eine Laufschrift direkt in die Schaltfläche einfügen. Da diese Methoden aber nicht mit allen Browsern und nicht zuverlässig laufen, möchten wir sie nicht anraten. Anders als bei der optischen Gestaltung leidet hier die Funktionsfähigkeit des Formulars.

 

Artikel, die Sie auch interessieren könnten:

Buttons mit Bild
Es gibt mehrere Möglichkeiten, einen Formularknopf mit einer Grafik zu verschönern, beziehungsweise durch eine solche zu ersetzen. Doch dann können keine Werte (value) übergeben werden. Für CGI-Programme zur Auswertung umfangreicher Formulare ein Problem.

 

 
   Anzeigen

Navigation:    Webdesign - Programmierung - Web Grafiken - Software Guides - Tools - Templates - Schriftarten - Seminare - IT News
Partner:   Template OK - PCopen - SITEopen - PCopen Schweiz - HTMLopen Schweiz - VirtualUniversity.ch - WEB-SET.com - YesMMS - Job und Karriere