Style

Assistant

Startseite
Screenshot
Kurzanleitung
Download
Kurse & Infos
>Tipps & Tricks<
Unterstützer
TMXtensions
?Freeware!
About TM
E-Mail
Made with CSS
Valid HTML 4.01!
Stand: 07.12.2002

Tipps & Tricks – Tipp 22
Zur Übersicht

22. CSS-Formatierung von Formular-Elementen (06.02.2000)

Formular-Elemente wie Input-Felder, TEXTAREAs oder SELECT-Auswahlfelder lassen sich sehr einfach mittels CSS formatieren, so wie das auch bei den meisten anderen HTML-Tags möglich ist. Leider hat zurzeit nur der Internet Explorer ein "offenes Ohr" für derartige Wünsche. Im direkt folgenden Beispiel wurden zwei Klassen definiert und den Formular-Elementen zugewiesen: 
      /* CSS */

      .gelbaufrot
      {
      Color: yellow;
      Background-Color: red;
      }

      .gruenaufsilber
      {
      Color: green;
      Background-Color: silver;
      Font-Family: Arial, Helvetica, Sans-Serif;
      Font-Size: 12px;
      }

      <!-- HTML -->

      <FORM NAME="mitCSSformatiert" ACTION="">
      <INPUT CLASS="gelbaufrot" TYPE="text"
        NAME="textfeld" VALUE="Text" SIZE="50">
      <SELECT CLASS="gruenaufsilber" NAME="Auswahl">
      <OPTION>Zur Seite 1</OPTION>
      <OPTION>Zur Seite 2</OPTION>
      <OPTION>Zur Seite 3</OPTION>
      <OPTION>Zur Seite 4</OPTION>
      <OPTION>Zur Seite 5</OPTION>
      </SELECT>
      </FORM>
Das Beispiel 22a zeigt eine Anwendung zum Versenden von Formularen über einen externen Formmailer – eine praktische Sache, wenn man bei seinem Provider keine eigenen CGI-Scripts verwenden kann. Zur Anwendung kommt der Formmailer von Lars Lüpke's Homepageforum.


Die Auswahl von Einträgen eines Drop-Down-Menüs zeigt Beispiel 22b. Im linken Frame lassen sich bequem Suchmaschinen auswählen, deren Suchformulare direkt im rechten Frame geladen werden. Interessant ist dabei noch das automatische Laden einer URL. Das Formular hat den Namen suchmaschinen, die SELECT-BOX den Namen adressen. Aufgerufen wird die JavaScript-Funktion GeheZuAdresse(): 

      function GeheZuAdresse()
      {
      var index=
        document.suchmaschinen.adressen.selectedIndex;
      parent.rechts.location.href=
        document.suchmaschinen.adressen.options[index].value;
      }