Wer kennt es nicht: Kontaktformulare, Bestellformulare und andere Eingabemasken sind in der heutigen Onlinewelt allgegenwärtig. Dabei ist es für den Entwickler häufig ein größerer Aufwand die Elemente ordentlich auszurichten, als für den Nutzer auf den ersten Blick ersichtlich ist. Genau diesem Thema widmet sich das CSS-Framework Formee.
Da Formee noch nicht lange auf dem Markt ist, möchte ich in diesem Artikel kurz die Handhabung dieses Frameworks erläutern und ein praktisches Beispiel aufzeigen. Der Vorteil an Formee liegt auf der Hand: Es ist crossbrowserfähig, es ist flexibel und darüber hinaus anpassbar.
Um Formee zu nutzen wird als erstes die aktuelle Version (derzeit 1.2) benötigt. In diesem Paket sind die zwei benötigten CSS-Dateien sowie die verwendbaren Bilder enthalten. Neben diesen befinden sich darin der so genannte Reference Guide und eine Beispieldatei.
Das Beispiel:
Um Formee nutzen zu können legen wir eine HTML-Datei an. Das Grundgerüst sowie das Einbinden von Formee sind im ersten Quellcodeauszug dargestellt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Formee Beispiel</title> <link rel="stylesheet" href="css/form-structure.css" type="text/css" media="screen" /> <link rel="stylesheet" href="css/form-style.css" type="text/css" media="screen" /> </head> <body> </body> </html>
Wichtig ist dabei die Reihenfolge: Zuerst die Strukturdatei, anschließend die Datei für die CSS Styles. Nachdem diese Arbeit angeschlossen ist, sind die Schritte für den direkten Start gemacht. Jetzt gilt es diese CSS-Vorarbeiten zu nutzen. Dazu möchte ich an dieser Stelle die Umsetzung eines Registrierungsformulares zeigen.
Formee ist sehr einfach und deutlich in der Anwendung. Zuerst muss ein Form geöffnet werden und mit der Klasse “form” versehen werden. Geschachtelt werden die zusammengehörigen Elemente mit einem fieldset. Dieses besteht aus einer Legende (Legend) und dem eigentlichen Inhalt. Die Legende wird bei Formee standardmäßig in einem schwarzen Block oben links dargstellt.
<label class="form-lbl">Nutzername <em class="form-req">*</em></label> <input type="text" class="form-txt" value="" />
Der eigentliche Inhalt wird dann mit Hilfe von Divs erstellt. Dabei nutzen diese je nach dem wie breit sie werden sollen bestimmte Klassen. Diese Klassen stellen Anteile am Ganzen (in Bezug auf die Zahl 12) dar. Die Klasse grid-4-12 bewirkt demnach, dass ein Div für ein Drittel des verfügbaren Platzes erstellt wird. Die darin verwendeten Form-Elemente werden auf diese Größe skaliert.
Labels verwenden bei Formee die Klasse “form-lbl“. Um Felder als “required” darzustellen (standardmäßig werden diese Felder mit einem roten Stern versehen) gibt man dem span-Element die Klasse “form-req“. Darüber hinaus liefert Formee gleich die benötigten Nachrichtenboxen mit um mit dem Nutzer zu interagieren. Dazu verwendet man die Klassen “form-msg-info“, “form-msg-warning“, “form-msg-error” und “form-msg-success“.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Formee Beispiel</title>
<link rel="stylesheet" href="css/form-structure.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/form-style.css" type="text/css" media="screen" />
</head>
<body>
<form class="form" action="">
<fieldset>
<legend>Registrierung</legend>
<div class="grid-4-12">
<label class="form-lbl">Nutzername <em class="form-req">*</em></label>
<input type="text" class="form-txt" value="" />
</div>
<div class="grid-4-12">
<label class="form-lbl">Password <em class="form-req">*</em></label>
<input type="password" class="form-txt" value="" />
</div>
<div class="grid-4-12">
<label class="form-lbl">Password (wiederholen) <em class="form-req">*</em></label>
<input type="password" class="form-txt" value="" />
</div>
<div class="grid-12-12">
<label class="form-lbl">Woher kennen Sie uns?</label>
<input type="text" class="form-txt" value="Fill up the field" />
</div>
<div class="grid-4-12">
<label class="form-lbl">Wählen Sie Ihren Berufsstand <em class="form-req">*</em></label>
<select class="form-big">
<option>Student</option>
<option>Angestellter</option>
<option>Selbstständiger</option>
</select>
</div>
<div class="grid-8-12">
<label class="form-lbl">Wozu nutzen Sie unser Produkt? <em class="form-req">*</em></label>
<input type="text" class="form-txt" value="Fill up the field" />
</div>
</fieldset>
<fieldset>
<legend>Status</legend>
<div class="grid-12-12">
<span class="form-msg-info">Information Message</span>
<span class="form-msg-warning">Warning Message</span>
<span class="form-msg-error">Error Message</span>
<span class="form-msg-success">Success Message</span>
</div>
</fieldset>
</body>
</html>
Den Referenceguide findet ihr auf der Formee-Website und in dem vorliegenden Downloadpackage. Dieser zeigt Euch weitere Details und hilft bei weiteren Fragen.
[Download des Beispielquellcodes]
[Beispiel online ansehen]
Keine verwandten Themen vorhanden.
