Formulare attraktiver gestalten, Teil 1: Select-Listen Fr, Jan 25. 2008
Formulare ausfüllen ist nicht nur typisch deutsch, wenn diese auch noch öde aussehen ist es richtig unattraktiv und man möchte am liebsten wegklicken.
Man kann diese Problem zwar nicht abschaffen. Der größte Teil der Kommunikation im Internet läuft nunmal über Formulare. Sei es ein Warenkorb, ein Webmailer, ein Beschwerdeformular oder ein Blogeintrag. Aber Formulare lassen sich zumindest optisch etwas ansprechender gestalten.
Teil 1 dieser Serie beschäftigt sich mit ansprechenden Select-Listen.
Select-Listen attraktiver gestalten
Angenommen wir möchten ein Kontaktformular einer Firma basteln, die ca. 50 Mitarbeiter hat. Auf der Website dieser Firma möchte man dieses Formular den Kunden zur Verfügung stellen, um schnell einen Kontakt zum Ansprechpartner herzustellen (z.B. Email per Formular senden).
Hier der HTML-Code für unser Beispiel:
<form method="post" action="">
<select name="select">
<option value="01">Chef</option>
<option value="02">Anke Alter</option>
<option value="03">Berta Bertram</option>
<option value="04">Caspar Casimir</option>
<option value="05">Dagmar Darmstadt</option>
<option value="06">Egon Esel</option>
<option value="07">Edmund Edmundson</option>
<option value="08">Frank Frankl</option>
<option value="09">Gustav Gurk</option>
<option value="10">Heinrich Hein</option>
<option value="11">Inga Innerkofler</option>
<option value="12">Jasmin Jablonski</option>
<option value="13">Karl Käfer</option>
<option value="14">Laura Lüttich</option>
<option value="15">Manfredo Mann</option>
<option value="16">Natascha Nabel</option>
<option value="17">Otto Ottokar</option>
<option value="18">Paula Panzer</option>
<option value="19">Rita Richard</option>
<option value="20">Stefan Stangel</option>
<option value="21">Ted Tedderson</option>
<option value="22">Ute Urselich</option>
<option value="23">Vranz Venediger</option>
<option value="24">Walter Wankel</option>
<option value="25">Xaver Xantel</option>
<option value="26">Zar1 Zachharäus</option>
<option value="27">Zar2 Zachharäus</option>
<option value="28">Zar3 Zachharäus</option>
<option value="29">Zar4 Zachharäus</option>
<option value="30">Zar5 Zachharäus</option>
</select>
</form>
Hier die Liste, wie sie mein Firefox präsentiert, nicht sonderlich attraktiv und etwas unaufgeräumt:
"Wer war nochmal mein Ansprechpartner im Bereich Verkauf?"
Website-Besucher sind stets bemüht, Informationen schnell zu erfassen.
Darin kann man sie unterstützen, indem man die Informationen optisch aufbereitet.
In diesem Falle habe ich mich entschieden, die Personen nach Ihrer Stellung innerhalb des Unternehmens und den Abteilungen zu ordnen.
Es gibt in unserem Beispiel vier Stufen/Abteilungen
- Geschäftsführung
- Wareneinkauf
- Warenverkauf
- Abteilung Marketing
In HTML unterstützt uns dabei das Tag <optgroup></optgroup>. Es dient zum Gruppieren von Elementen innerhalb einer Liste.
Vorsicht: innerhalb einer optgroup dürfen keine weiteren optgroup-Tags erlaubt. Das Verschachteln klappt daher nicht.
HTML-Code:
<form method="post" action="">
<select name="select">
<optgroup label="Geschäftsführung">
<option value="01">Chef</option>
<option value="02">Anke Alter</option>
<option value="03">Berta Bertram</option>
</optgroup>
<optgroup label="Wareneinkauf">
<option value="04">Caspar Casimir</option>
<option value="05">Dagmar Darmstadt</option>
<option value="06">Egon Esel</option>
<option value="07">Edmund Edmundson</option>
<option value="08">Frank Frankl</option>
<option value="09">Gustav Gurk</option>
</optgroup>
<optgroup label="Warenverkauf">
<option value="10">Heinrich Hein</option>
<option value="11">Inga Innerkofler</option>
<option value="12">Jasmin Jablonski</option>
<option value="13">Karl Käfer</option>
<option value="14">Laura Lüttich</option>
<option value="15">Manfredo Mann</option>
<option value="16">Natascha Nabel</option>
<option value="17">Otto Ottokar</option>
<option value="18">Paula Panzer</option>
<option value="19">Rita Richard</option>
<option value="20">Stefan Stangel</option>
<option value="21">Ted Tedderson</option>
<option value="22">Ute Urselich</option>
<option value="23">Vranz Venediger</option>
<option value="24">Walter Wankel</option>
<option value="25">Xaver Xantel</option>
</optgroup>
<optgroup label="Abteilung Marketing">
<option value="26">Zar1 Zachharäus</option>
<option value="27">Zar2 Zachharäus</option>
<option value="28">Zar3 Zachharäus</option>
<option value="29">Zar4 Zachharäus</option>
<option value="30">Zar5 Zachharäus</option>
</select>
</form>
So sieht´s aus, schon besser geordnet, aber immer noch nicht besonders schön:
Jetzt kommt CSS ins Spiel. Dazu vergeben wir nun jeder optgroup eine eigene Klasse:
<optgroup label="Geschäftsführung" class="gf">
...
<optgroup label="Wareneinkauf" class="we">
...
<optgroup label="Wareneinkauf" class="wv">
...
<optgroup label="Wareneinkauf" class="mk">
Und nun ergänzen wir im head-Abschnitt der HTML-Datei diesen CSS-Abschnitt:
<style type="text/css">
<!--
optgroup.gf {
background:#AAB5FD;
}
optgroup.gf option {
background:#D5DAFD;
}
optgroup.we {
background:#FFFF33;
}
optgroup.we option {
background:#FFFFCC;
}
optgroup.wv {
background:#EC7174;
}
optgroup.wv option {
background:#F7DFE0;
}
optgroup.mk {
background:#00CC00;
}
optgroup.mk option {
background:#9DFF9D;
}
-->
</style>
Üblicherweise wird die Stylesheet Datei extern eingebunden. Hier gilt der Style nur für das aktuelle HTML-Dokument.
Das Ergebnis ist eine hübsche Liste, die per CSS gestylt wurde.
Natürlich machen auch reine Listen ohne Formatierung in manchen Fällen Sinn, z.B. Listen die rein nach alphabetischen Kriterien arbeiten. Wenn allerdings eine Strukturierung in Frage kommt, hat man mit der optgroup eine gute Möglichkeit diese langweiligen Listen etwas interessanter zu gestalten.
Bookmarks:
Delicious Facebook Google Yahoo Mr. Wong Linkarena Digg