Die Gestaltung von Formularen ist so eine Sache: Zwar gibt es mit CSS die Möglichkeit, diverse Formular-Elemente individuell aussehen zu lassen. Bei Eingabefeldern funktioniert das auch ganz gut. Bei Auswahllisten, Checkboxen und Radiobuttons sind die Gestaltungsmöglichkeiten allerdings sehr begrenzt. Mit dem jQuery-Plugin Uniform können Formulare uneingeschränkt gestaltet werden – und das auch noch recht simpel.

Formular mit Uniform gestaltet (links) und ohne Gestaltung (rechts)

So funktioniert Uniform

Zunächst müssen jQuery, das Uniform-Plugin und die dazugehörige Stylesheet-Datei im Kopf des HTML-Dokumentes eingebunden werden:

1
2
3

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="jquery.uniform.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/uniform.default.css" type="text/css" media="screen">

Anschließend wird per jQuery-Selektor das Plugin auf die gewünschten HTML-Elemente angewendet:

1
2
3
4
5

<script type="text/javascript">
  $(function(){
    $("input, textarea, select, button").uniform();
  });
</script>

Im Beispiel berücksichtigen wir alle Formular-Elemente. Natürlich kann man auch nur bestimmte Elemente per Uniform gestalten lassen. Mehr Einstellungen sind zunächst nicht nötig. Alle ausgewählten Formular-Elemente des Dokumentes werden nun im Standard-Layout von Uniform dargestellt.

Formular-Layout anpassen

Das gesamte Layout der Formular-Elemente ist in der mitgelieferten CSS-Datei sowie einem Bilder-Sprite hinterlegt. Das Plugin wandelt alle Formular-Elemente in DIV-Elemente um, denen per CSS das Uniforn-Layout zugewiesen wird. Per JavaScrpt wird die entsprechende Formular-Funktionalität den Elementen hinzugefügt, sodass sich diese nach wie vor in gewohnter Weise bedienen, beziehungsweise ausfüllen lassen.

Neben dem Uniform-Standardlayout gibt es weitere Themes, die herunter geladen und einfach eingebunden werden können. Es muss lediglich die CSS-Referenz im HTML-Kopf ausgetauscht werden. Wer es ganz individuell möchte, kann sich auch relativ einfach ein eigenes Theme bauen. Bis auf wenige Ausnahmen für die Textfelder – Schrift, Ränder und Schatten – werden alle Elemente über das Bilder-Sprite gestaltet.

Sprite des Standard-Themes

Im Sprite befinden sich Grafiken für alle Formular-Elemente – also für Eingabefelder, Auswahllisten, Checkboxen und Radiobuttons. Auch Varianten für unterschiedliche Zustände („mouseover“ und „focus“) werden berücksichtigt. Über den Sprite können all diese Elemente bequem neu gestaltet werden.

Das Theme-Kit, das separat als Download zur Verfügung steht, hilft bei der Gestaltung eines individuellen Themes. Im Kit enthalten ist eine Photoshop-Datei mit dem Standard-Layout, die sich bearbeiten lässt. Wer für die einzelnen Elemente andere Größen wählt als in der Vorlage, hat mit dem Theme-CSS-Generator die Möglichkeit, die CSS-Datei entsprechend anzupassen.

Lizenz und Kompatibilität

Uniform von Pixelmatrix steht unter der MIT-Lizenz und ist daher uneingeschränkt nutzbar. Das Plugin läuft unter Firefox und Safari ab Version 3, unter dem Internet Explorer ab Version 7, Opera ab Version 10 sowie unter Chrome.

(dpe)

Denis Potschien

Seit 2005 ist er freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet.

• Web
|
• Facebook
|
• Google+
|
• More Posts (156)