Webdsign: CSS-Akademie
Einfache HTML-Formulare sehen weder besonders ansprechend aus, noch bieten sie optimalen Bedienkomfort. Nutzen Sie daher CSS, um sie nahtlos in das Layout Ihrer Website einzufügen.
Trister weißer Hintergrund, altbackene 3-D-Rahmen und keine Spur von Benutzerführung - mit reinem HTML erstellte Webformulare passen sich weder in ein modernes Weblayout ein, noch sind sie aus ergonomischer Sicht auf der Höhe der Zeit. Die klobigen Eingabefelder und Absende-Schaltflächen ersc...
Trister weißer Hintergrund, altbackene 3-D-Rahmen und keine Spur von Benutzerführung - mit reinem HTML erstellte Webformulare passen sich weder in ein modernes Weblayout ein, noch sind sie aus ergonomischer Sicht auf der Höhe der Zeit. Die klobigen Eingabefelder und Absende-Schaltflächen erscheinen in einem professionell angelegten und farblich abgestimmten Layout wie Fremdkörper.
Verleihen Sie den biederen Online-Formularen daher mit Cascading Style Sheets (CSS) mehr Pep und verbessern Sie die Ergonomie beispielsweise durch zusätzliche Gruppierungsrahmen und eine farbige Hervorhebung des aktuellen Eingabefeldes.
Die Zugänglichkeit von Web-Formularen erhöhen Sie zudem, indem Sie sich vom klassischen Tabellenlayout lösen und die Beschriftungen und Felder mit CSS auf dem Bildschirm anordnen. So machen Ihre Seiten auch auf mobilen Geräten wie PDA und Handy eine gute Figur.
Eingabefelder formatieren
Bei nahezu allen Formularobjekten lassen sich der Rahmen, die Füllung sowie die Schriftgestaltung flexibel anpassen.
Erstellen Sie beispielsweise für Textfelder eine Formatklasse nach dem folgenden Muster:
.eingabe {background-color:#FAF3E0;
border: solid 1px #744; fontfamily:
Arial, Helvetica, sans;
color:#744; font-weight:bold;}Fügen Sie diese Klasse entweder zwischen <style type="text/css"> und </style> in den <head>-Bereich der Webseite ein oder lagern Sie sie in die zentrale CSS-Datei Ihres Web- Projektes aus. Die Füllfarbe der Felder definieren Sie mit "background-color". Bei "border" legen Sie die Rahmenart, -breite und -farbe fest.
Auch die Schriftart lässt sich vorgeben. Formatieren Sie die Feldinhalte mit "font-family" (Schriftart), "color" (Schriftfarbe) und "fontweight" (Stärke). Verbinden Sie die Eingabefelder nach dem folgenden Muster mit der CSS-Klasse:
<input type="text" name="vorname"
class="eingabe">Mit reinem HTML haben Sie zudem Schwierigkeiten, Textfelder in gleicher Breite anzulegen. Die Zeichenbreite von einzeiligen Feldern stimmt nicht mit der Spaltenbreite von mehrzeiligen überein.
Erstellen Sie anschließend die folgende Formatklasse und weisen Sie den Feldern diese Klasse zu (zweite Zeile) - sämtliche mit der Klasse verknüpften Felder sind nun gleich breit.
.feldbreite {width:200px;} <input type="text"
name="vorname" class=
"eingabe feldbreite">Effekte durch Rahmengestaltung
Besondere Effekte erzeugen Sie bei Eingabefeldern über die unterschiedliche Gestaltung des Rahmens. Formatieren Sie ihn beispielsweise mit "border-style:dotted" gepunktet oder blenden Sie ihn mit "border-style:none" sogar ganz aus.
Auch eine 3-D-Optik lässt sich durch unterschiedliche Stärken und Farben der einzelnen Rahmenlinien erzielen. Geben Sie beispielsweise folgende CSS-Eigenschaften ein:
.eingabe {
background-color:#FAF3E0;
border-right: none; border-bottom:
none;
border-left: solid 1px #744;
border-top: solid 1px #744;
font-family:Arial, Helvetica, sans;
color:#744;
font-weight:bold; }Die Eingabefelder erscheinen vertieft, wenn Sie wie im Beispiel den rechten und unteren Rand ausblenden. Lassen Sie hingegen den linken und oberen Rand weg, so treten die Felder optisch etwas hervor.
Formularobjekte gruppieren
Verbessern Sie zudem die Bedienbarkeit der Formulare, indem Sie Objekte, die inhaltlich zusammengehören, mit einem Rahmen gruppieren. Verwenden Sie dazu das Tag <fieldset> nach dem folgenden Beispiel:
<fieldset><legend>Zahlweise</legend><input type="radio" name="zahlweise"
value="bar"> Bar <input type="radio" name="zahlweise"
value="ueberweisung"> Rechnung </fieldset>Die Radiobuttons innerhalb von <fieldset> und </fieldset> werden von einer dünnen Linie umrandet. Geben Sie die Überschrift dieser Gruppe zwischen <legend> und </legend> ein. Mit CSS lassen sich die Farbe und die Breite der Rahmenlinie sowie die Abstände zu den eingeschlossenen Formularobjekten festlegen. Definieren Sie dazu beispielsweise das folgende CSS-Format:
.zahlweise {border: solid #009 1px;
padding:10px 20px 20px 20px;
width:200px;}Auch bei einem <fieldset>-Objekt kann die Breite über den Parameter "width" eingestellt werden. Verbinden Sie die Gruppe über <fieldset class="zahlweise"> mit dem Format. Passen Sie schließlich die Überschrift mit folgender Zeile an die Farbe des Rahmens an:
legend {color:#009;}Dynamische Nutzerführung
Ein weiterer nützlicher Effekt bei Bildschirmformularen: Lassen Sie die Eingabefelder farbig hervorheben, sobald die Surfer mit der Maus darüber gleiten. Sie erreichen dies durch eine dynamische Änderung der CSS-Eigenschaft mit JavaScript. Notieren Sie die Tags für die Formularfelder nach diesem Muster:
<input type="text" id="vorname" onMou
seOver="this.style.backgroundColor=’#C
A6’;" onMouseOut="this.style.backgroundColor=’#
FAF3E0’;" />Bewegen Sie die Maus über ein solches Feld, erscheint der Hintergrund in einer anderen Farbe. Ziehen Sie sie weg, ist wieder die ursprüngliche Füllung zu sehen. Vor allem ungeübte Internetnutzer behalten den Überblick leichter, wenn Sie das Feld mit einem andersfarbigen Rahmen hervorheben. Fügen Sie dazu die beiden folgenden Parameter zu den Tags der Eingabefelder hinzu:
onFocus="this.style.border=’solid 2px
red’; "onBlur="this.style.border=
’solid 1px #744’;"Erhält ein solches Feld den Fokus (onFocus), wird die Rahmenfarbe auf Rot umgestellt und die Breite um einen Pixel erhöht. Verlässt der Cursor das Feld (onBlur), erscheint dieses wieder in der ursprünglichen Gestaltung.
Besonderer Hingucker
Nicht immer erkennen die Besucher auf Anhieb, welche Eingabefelder besonders wichtig sind. Lenken Sie die Aufmerksamkeit der Nutzer daher mit einer Animation im Hintergrund auf die wesentliche Stelle des Formulars. Lassen bei einem E-Mail-Feld beispielsweise die erforderliche Syntax als Beispiel einblenden. So gehts: Geben Sie dem Formularfeld zuerst über den Parameter "id" einen eindeutigen Namen und übernehmen Sie anschließend die animierte GIF-Grafik mit der folgenden CSS-Angabe in den Hintergrund:
<input type="text" id="email" />#email {background-image:url(email
ani.gif);}Verhindern Sie gegebenenfalls mit der zusätzlichen Eigenschaft "backgroundrepeat: no-repeat", dass sich das Bild nach rechts und unten wiederholt. Die Animation würde jedoch stören, wenn ein Surfer den Cursor in das Feld stellt und etwas eingeben möchte. Erweitern Sie das Tag <input> daher um die folgenden Skriptbefehle:
<input type="text" id="email" on
Focus="this.style.backgroundPosition=
’-1500px’;" onBlur="if(this.value
==’’)this.style.backgroundPosition=
’0px’;" />Sie schieben damit das Hintergrundbild mit einem sehr hohen negativen Pixelwert nach links aus dem sichtbaren Bereich, sobald das Feld den Fokus erhält. Verlässt der Besucher das Feld und ist es weiterhin leer, so rückt die Grafik zurück an ihre alte Position und ist damit wieder sichtbar.
Flexibles Layout
Zur Anordnung der Formularobjekte verwenden die meisten Webmaster HTML-Tabellen. Die sind zwar praktisch, aber für die flexible Anzeige beispielsweise auf Bildschirmen von Mobiltelefonen oder PDAs zu starr. Nutzen Sie zur Anordnung der Elemente besser CSS. Weisen Sie dem Formular eine Formatklasse nach dem folgenden Muster zu:
<form action="..." class="formlay
out">...</form>Erstellen Sie für jedes Element des Formulars einen Absatz nach dem folgenden Beispiel:
<p><label for="vorname">Vorname:</label><input type="text" id="vorname" /></p>Mit dem <label>-Tag ordnen Sie dem nachfolgenden Eingabefeld eine Beschriftung zu. Formatieren Sie die Absätze innerhalb des Formularbereichs mit dem folgenden Stil:
.formlayout p {width:350px; margin:0;
padding:5px 0 10px 145px;}Sie legen die Absätze damit in einer Breite von 350 Pixeln an und halten links einen 145 Pixel breiten Abstand zum Rand. Fügen Sie die Beschriftung mit dem folgenden Stil in diesen freien Bereich ein:
.formlayout label {float:left; marginleft:-
145px; width: 140px;}Mit dem negativen linken Einzug ziehen Sie den Inhalt von <label> nach vorne an den Rand. Aus der Differenz von 140 und 145 ergibt sich ein Mindestabstand von 5 Pixeln zwischen der Beschriftung und dem Formularobjekt. Einen Fehler des Internet Explorer 6 gilt es noch zu beseitigen: Sind in einem Absatz mehrere Formularobjekte durch Zeilenumbrüche untereinander angeordnet, dann verschieben sie sich ab der zweiten Zeile um drei Pixel nach links. Gleichen Sie diesen Fehler mit der folgenden Formatklasse aus:
* html .dreipixel {margin-left:3px;}Mit class="dreipixel" weisen Sie diese dem zweiten und allen weiteren Elementen im betreffenden Absatz zu.
