Case studies: von Fall zu Fall
Fallbeispiel 2: Formulare
Auf fast jeder Website treffen wir auf Formularelemente - sie sorgen für Interaktivität zwischen Betreiber und Benutzer. Ohne Formulare wäre die gesamte Welt des eCommerce vollkommen undenkbar. Wie sind Formulare aufgebaut? Sie bestehen aus einer mehr oder weniger großen Zahl von unterschiedlichen Eingabeelementen (einzeilige bzw. mehrzellige Textfelder, Radioboxen, Checkboxen, Listen und Dateidialogen), sowie dem öffnenden und schließenden <form>-Tag. Wie die erfassten Formulardaten im Einzelnen verarbeitet werden, soll uns an dieser Stelle nicht weiter interessieren.
Meistens sind die einzelnen Eingabefelder auch in irgendeiner Form beschriftet (meistens per HTML-Tabelle), damit der Besucher weiß, was er wo eintragen soll. Einen logischen Zusammenhang zwischen Beschriftung ("Label") und Eingabefeld gibt es meistens aber nicht - Anwender assistiver Software haben dann einen schweren Stand. Genauso wenig sind zusammengehörige Felder selten zu einer Gruppe zusammengefasst.
Dabei lässt sich mit HTML 4.0 genau das recht einfach bewerkstelligen. Betrachten wir zunächst ein "herkömmliches" Formular (zu vergleichen mit dem berühmt-berüchtigten "herkömmlichen Waschmittel"):
<strong>Angaben zur Person</strong><br>
Name<br><input type="text" name="name"><br>
Vorname<br><input type="text" name="vorname"><br>
Alter<br><input type="text" name="alter" size="2">
<br><br>
<strong>Lieblingsobst</strong><br>
<input type="checkbox" name="obst1" value="1"> Zitronen<br>
<input type="checkbox" name="obst2" value="2"> Bananen<br>
<input type="checkbox" name="obst3" value="3"> Melonen<br>
<input type="checkbox" name="obst4" value="4"> Erdbeeren
<br><br>
<input type="submit" value="Absenden">
</form>
Herkömmliches Formular
Mit diesem Formular werden die meisten Besucher umgehen können; trotzdem wollen wir es natürlich verbessern... Setzen wir die in HTML 4.0 bereitgestellten Formular-Tags konsequent ein, erhalten wir ein wesentlich aussagekräftigeres Formular:
<fieldset style="padding:10px">
<legend style="color:#0000ff">Angaben zur Person</legend>
<label for="name">Name</label><br>
<input type="text" name="name" id="name"><br>
<label for="vorname">Vorname</label><br>
<input type="text" name="vorname" id="vorname"><br>
<label for="alter">Alter</label><br>
<input type="text" name="alter" id="alter" size="2">
</fieldset>
<fieldset style="padding:10px">
<legend style="color:#0000ff">Lieblingsobst</legend>
<input type="checkbox" name="obst1" id="obst1" value="1">
<label for="obst1">Zitronen</label><br>
<input type="checkbox" name="obst2" id="obst2" value="2">
<label for="obst2">Bananen</label><br>
<input type="checkbox" name="obst3" id="obst3" value="3">
<label for="obst3">Melonen</label><br>
<input type="checkbox" name="obst4" id="obst4" value="4">
<label for="obst4">Erdbeeren</label>
</fieldset>
<input type="submit" value="Absenden">
</form>
Verbessertes Formular
Dieses Formular fasst mehrere Eingabefelder via <fieldset> zu logischen Gruppen zusammen. <legend> sorgt für eine Beschriftung und zeichnet auch gleich einen Rahmen um die Gruppe (wer das nicht möchte, stellt den Rahmen per CSS ab). Jedes Eingabefeld ist nun neben dem Attribut "name" auch über "id" identifizierbar. Das ist für den Einsatz von <label> wichtig: mit diesem Tag wird nun endlich eine logische Verknüpfung zwischen Beschriftung und Eingabefeld ermöglicht, ganz gleich, wo die Beschriftung sich tatsächlich befindet. Über die "id" kann der Browser den Zusammengang feststellen. Im Klartext heißt das, wenn der Benutzer auf das Label klickt, erhält das zugeordnete Eingabefeld den Fokus. Das ist vor allem bei "kleinen" Eingabeelementen wie Radio- oder Checkboxen interessant, da sie nun mit dem Label einen wesentlich größeren Hotspot erhalten.
Natürlich kann man dieses Verhalten auch mit Javascript erreichen (und wir haben das auch schon gesehen) - aber wozu der Umstand, wenn man dies alles auch mit Bordmitteln erreichen kann?
Formulare lassen sich noch benutzerfreundlicher gestalten; so wäre es für den Anwender schön, wenn das jeweils ausgewählte Eingabefeld optisch hervorgehoben wird. An dieser Stelle muss der Marktführer der Browser, der Microsoft Internet Explorer, leider passen - offenbar hält man sich in Redmond lieber an eigene Standards. Andere Browser wie Netscape, Mozilla oder die verschiedenen Mac- und Unix-Browser bieten hier die Unterstützung von Pseudo-Klassen:
input: hover { background:#ff0; }
Eingabelemente mit Pseudoklassen besser hervorheben
Zur "Ehrenrettung" des Internet Explorers sei jedoch vermerkt, dass sich dieses Verhalten immerhin nachbauen lässt. Dann ist der Einsatz von Javascript allerdings unvermeidbar. Im Microsoft-Browser ermöglicht Javascript, auf bestehende Styles zuzugreifen und Designer können Regeln (so genannte "behaviors") definieren, die dafür sorgen, dass sich beliebige Elemente beim Auftreten eines Events (z.B. MouseOver) auf eine benutzerdefinierte Art und Weise verhalten. Browser wie Netscape oder Opera, die keine Behaviors kennen, ignorieren diese Angaben ganz einfach.
Weitere Informationen über Behaviors und ihren Einsatz gibt es unter http://www.xs4all.nl/~peterned/csshover.html