Ein Formular ist ein standardisiertes Mittel zur Erfassung von Daten. Formulare vereinfachen die Erhebung von (Massen-)Daten, sorgen für Vollständigkeit sowie Datenintegrität und schützen vor Mehrdeutigkeiten, die bei freier Wortwahl oder einem formlosen Antrag auftreten können.
Ein XHTML-Formular ist ein Abschnitt eines Dokuments, der neben gewöhnlichem Inhalt spezielle Steuerelemente – beispielsweise Optionsfelder, Schaltflächen, (Mehrfach-)Auswahllisten oder Kontrollkästchen – und deren Beschriftungen enthält.
Auch wenn Zugänglichkeit und Gebrauchstauglichkeit wichtige Teile der Webentwicklung sind (gerade bei Formularen, bei denen es darauf ankommt, dass sie verständlich, übersichtlich und auch per Tastatur vollständig bedienbar sind), wird in dieser Einführung nur auf die technischen Grundlagen eingegangen. Web-ergonomische Forderungen, Eingabehilfen, programmatische Verarbeitungsabläufe und Fehlerbehandlung würden den Rahmen dieser Einführung sprengen. Stattdessen empfehle ich die Lektüre der Artikel [Caspers 2007] und [Hellbusch].
Formulare sind ein Instrument der Mensch-Maschine-Interaktion, das heißt eine Schnittstelle zwischen einem Nutzer, der das Formular ausfüllt, und einem Programm oder Script, das die Angaben entgegennimmt und auswertet oder verarbeitet. Benutzer füllen ein Formular im Allgemeinen durch die Bedienung seiner Steuerelemente aus und senden es anschließend ab, zum Beispiel zu einem Webserver oder einem Mailserver. Im Web häufig anzutreffende Formulartypen sind Anmelde-, Bestell-, Kontakt- oder Suchformulare.
Das Auslesen und Verarbeiten der Formulardaten kann XHTML allein jedoch nicht leisten. Hier kommen server- und clientseitige Programmier- oder Skriptsprachen zum Einsatz.
Formularcontainer: Der Elementtyp form
Das Element form
ist ein Container für Steuerelemente. Alles, was zwischen
Start- und End-Tag steht, gehört zum Formular. In strikten
Dokumenten darf das form-Element nur Blockelemente als
Kinder enthalten.
form-Elemente verfügen üblicherweise über die Attribute
action, method und enctype.
Das Attribut action gibt in Form
eines URI an, wohin die Formulardaten geschickt werden sollen,
wenn das Formular abgesendet wird.
Das Attribut method gibt die
HTTP-Methode zur Übertragung der Formulardaten an. Die
Methode get ist die Standardeinstellung
und legt fest, dass die Daten als Parameter an die im Attribut
action angegebene Adresse
angehängt werden. Bei der Methode post werden die
Daten über den sogenannten Standardeingabekanal zur
Verfügung gestellt.
Die W3C-Empfehlungen legen nahe, post immer dann zu
verwenden, wenn das auswertende Programm »Nebeneffekte«
verursacht, die Daten also über das auswertende Programm
hinaus weiterverwendet werden. Dies ist zum Beispiel dann der
Fall, wenn eine Datenbank verändert werden soll. Wird das
Formular lediglich zum Informationsabruf verwendet,
beispielsweise bei einer Suchabfrage, reicht get aus.
Das Attribut enctype gibt den
MIME-Typ für die Übertragung des Formulars zum Server
an, sofern als Übertragungsmethode post gewählt
ist. Der Standardwert ist application/x-www-form-urlencoded;
ermöglicht das Formular Dateiuploads, sollte multipart/form-data
verwendet werden.
<form action="http://www.example.org/kontakt"> <!-- Auszeichnungs- und Steuerelemente --> </form> <form action="http://www.example.org/bildupload" method="post" enctype="multipart/form-data"> <!-- Auszeichnungs- und Steuerelemente --> </form>
Steuerelemente
Ein Formular besteht aus speziellen Elementen,
genannt Steuerelemente, die eine Interaktion eines Nutzers mit
einer Webseite über einfache Hyperlinks hinaus
ermöglichen. Jedes Steuerelement hat einen über das
Attribut name definierten Namen und einen
Anfangswert, der seitens des Nutzers oder durch ein Script
verändert werden kann. Wird ein Formular abgesendet, fassen
einige Steuerelemente ihre Namen mit den aktuellen Werten zu
einem Paar zusammen. Diese Paare werden mit dem HTTP-Request
übertragen.
Der Elementtyp input
Das leere Element input definiert
unterschiedliche Steuerelemente. Das Attribut type entscheidet,
um welche Art von Steuerelement es sich konkret handelt.
Unter anderem folgende Werte kann das Attribut
type annehmen:
Texteingabefeld: type="text"
Erzeugt ein einzeiliges Texteingabefeld.
<input type="text" name="text" />
Das Attribut size gibt dem Browser die
Anfangsbreite des Texteingabefelds an. Der Wert bezieht sich auf
die Anzahl der Zeichen. Das Attribut maxlength begrenzt
die Zahl der Zeichen, die ein Nutzer eingeben kann. Eine
derartige Einschränkung kann beispielsweise bei der
Erfassung deutscher Postleitzahlen sinnvoll sein oder zur
Eingrenzung auf einen festgelegten Wertebereich. size und
maxlength können ungleich sein.
<input type="text" name="plz" size="5" maxlength="5" />
Abb. 5.24: Texteingabefeld mit Vorbelegung
Oftmals ist es eine gute Idee, Formularfelder mit bestimmten Werten
vorzubelegen. Das kann hinsichtlich der Gebrauchstauglichkeit das
Mittel der Wahl sein, um das Ausfüllen des Formulars zu
vereinfachen. Das Attribut value weist einem Steuerelement
einen Anfangswert zu. Bei Texteingabefeldern hat es jedoch den
Nachteil, dass Nutzer die Vorbelegung manuell löschen
müssen, wenn sie einen anderen Wert eintragen wollen.
Über ein einfaches JavaScript lässt sich dies
automatisieren. Fokussiert (Fokus) der Nutzer das
Eingabefeld, etwa indem er hineinklickt, wird die Vorbelegung
entfernt; lässt er es leer und entfernt den Fokus aus dem
Eingabefeld, wird die Vorbelegung wieder eingefügt.
<input type="text" name="suche" value="Vorbelegung" onblur="if(this.value == '') this.value='Vorbelegung'" onfocus="if(this.value == 'Vorbelegung') this.value=''" />
Passwortfeld: type="password"
Erzeugt ein einzeiliges Texteingabefeld,
dessen Zeichen im Gegensatz zu Standardtexteingabefeldern
versteckt werden, in den meisten Browsern in Form von Asterisken
(*).
<input type="password" name="password" />
Auch Passwortfelder erlauben Längenbeschränkungen und eine Vorbelegung.
<input type="password" name="password" size="15" maxlength="32" value="Vorbelegung" onblur="if(this.value == '') this.value='Vorbelegung'" onfocus="if(this.value == 'Vorbelegung') this.value=''" />
Kontrollkästchen: type="checkbox"
Mit type="checkbox" wird ein
Kontrollkästchen erzeugt. Kontrollkästchen sind
Ein-/Ausschalter, von denen der Benutzer keinen, einen oder
mehrere ankreuzen kann. Das Attribut value ist notwendig
und gibt den Wert des Kontrollkästchens an, der mit dem
Absenden des Formulars an das verarbeitende Programm
übertragen wird.
<label><input type="checkbox" name="contact" value="phone" /> Ich freue mich auf den Anruf eines Vertriebsmitarbeiters.</label><br /> <label><input type="checkbox" name="contact" value="mail" /> Bitte senden Sie mir zukünftig weitere Informationen per E-Mail.</label>
Mithilfe des Attributs checked lassen sich
Kontrollkästchen vorselektieren.
<label><input type="checkbox" name="contact" value="phone" checked="checked" />Ich freue mich auf den Anruf eines Vertriebsmitarbeiters.</label><br /> <label><input type="checkbox" name="contact" value="mail" /> Bitte senden Sie mir zukünftig weitere Informationen per E-Mail.</label>
Abb. 5.25: Kontrollkästchen
Optionsfeld: type="radio"
type="radio" erzeugt ein
Optionsfeld. Optionsfelder sind wie Kontrollkästchen
Ein-/Ausschalter, schließen sich jedoch gegenseitig aus,
wenn sie sich den gleichen Namen teilen. Autoren sollten
sicherstellen, dass ein Optionsfeld als aktiv vorbelegt ist.
Anrede: <label><input type="radio" name="anrede" value="herr" checked="checked" /> Herr</label> <label><input type="radio" name="anrede" value="frau" />Frau</label>
Abb. 5.26: Optionsfelder
Absenden-Schaltfläche: type="submit"
type="submit" erzeugt eine
einfache Absenden-Schaltfläche. Aktiviert man sie, wird das
Formular abgeschickt. Benutzerprogramme verwenden den Wert des
Attributs value als Beschriftung für
die Schaltfläche.
<input type="submit" value="Absenden" />
Abb. 5.27: Absenden-Schaltfläche
Zurücksetzen-Schaltfläche: type="reset"
type="reset" erzeugt eine
Schaltfläche zum Zurücksetzen des Formulars in seinen
Anfangszustand. Benutzerprogramme verwenden den Wert des
Attributs value als Beschriftung für
die Schaltfläche.
<input type="reset" value="Abbrechen" />
Zurücksetzen-Schaltflächen sehen genau so aus wie Absenden-Schaltflächen, nur deren Beschriftung unterscheidet sich. Daher geschieht es recht häufig, dass Nutzer nach dem Ausfüllen eines Formulars versehentlich auf die Zurücksetzen- anstatt auf die Absenden-Schaltfläche klicken. Um dies zu vermeiden, verzichten viele Webautoren auf Zurücksetzen-Schaltflächen. Ein Nachteil für Nutzer ergibt sich daraus nicht. Oder wie oft hatten Sie bereits das Bedürfnis, Eingaben, die Sie in einem Formular vorgenommen haben, aktiv zu verwerfen?
Verstecktes Steuerelement: type="hidden"
type="hidden" erzeugt ein
verstecktes Steuerelement, das nicht dargestellt wird, dessen
Wert aber mit dem Formular übertragen wird. Webautoren
verwenden versteckte Felder im Allgemeinen, um Informationen von
Client/Server-Operationen zu speichern, die ansonsten dadurch,
dass HTTP ein zustandsloses Protokoll ist, verloren gingen.
<input type="hidden" name="parameter" value="wert" />
Dateiauswahl: type="file"
type="file" erzeugt ein
Dateiauswahl-Steuerelement, das Benutzern die Auswahl einer Datei
gestattet, sodass ihr Inhalt mit dem Formular übertragen
werden kann. Benutzerprogramme können den Wert des
value-Attributs als
Anfangdateinamen verwenden.
Datei hochladen: <input type="file" name="upload" />
Abb. 5.28: Dateiauswahl-Steuerelement
Auswahlmenüs: Der Elementtyp select
Das Element select
erzeugt in Verbindung mit option-Elementen ein Menü, das Benutzern
Alternativen anbietet, aus denen sie wählen können.
Normalerweise wird beim Absenden des Formulars der Elementinhalt
des ausgewählten Listeneintrags übertragen. Webautoren
können jedoch über das Attribut value bestimmen,
dass ein anderer Wert übertragen wird. Einträge lassen
sich über die Angabe selected="selected"
vorwählen.
<select name="lacrimosa"> <option>Angst (CD)</option> <option>Einsamkeit (CD)</option> <option>Alles Lüge (CDS)</option> <option>Satura (CD)</option> <option>Schakal (CDS)</option> <option>Inferno (CD)</option> <option>Stolzes Herz (CDS)</option> <option>Stille (CD)</option> <option>Live (DCD)</option> <option>Allein zu zweit (CDS)</option> <option selected="selected">Elodia (CD)</option> <option>Der Morgen danach (CDS)</option> <option>Fassade (CD)</option> <option>Durch Nacht und Flut (CDS)</option> <option>Echos (CD)</option> <option>Lichtgestalt (CD)</option> <option>Lichtgestalten (EP)</option> <option>Lichtjahre (DCD)</option> </select>
Abb. 5.29: Auswahlmenü mit Vorselektierung
Abb. 5.30: Auswahlmenü mit Mehrfachselektion
Das Attribut size gibt an, wie
viele Einträge beziehungsweise Zeilen eines
Auswahlmenüs sichtbar sind. Wird size nicht
angegeben oder ist sein Wert gleich 1, stellen Browser
das Auswahlmenü im Allgemeinen als Klappliste dar.
Über die Angabe multiple="multiple" geben
Sie an, dass auch mehrere Einträge selektiert werden
können. Dann sollten Sie die Anzahl der Zeilen, die
angezeigt werden sollen, angeben, da Browser sich in diesem Fall
unterschiedlich verhalten. Einige Browser zeigen einen Teil der
Liste an, andere klappen sie vollständig auf. Für
Nutzer ist eine Mehrfachauswahl im Allgemeinen nicht unmittelbar
erkennbar, auch wissen viele nicht, wie sie mehrere Einträge
selektieren können (Strg bei gleichzeitigem
Selektieren der gewünschten Einträge). Ein kleiner
Hinweis kann da nicht schaden, beispielsweise in Form eines
title-Attributs.
<select name="lacrimosa" multiple="multiple" size="10" title="Mehrfachauswahl bei gedrückter Strg-Taste möglich"> <option>Angst (CD)</option> <option>Einsamkeit (CD)</option> <!-- ... --> <option>Lichtgestalten (EP)</option> <option>Lichtjahre (DCD)</option> </select>
Das Element optgroup gestattet es
Autoren, die Auswahlmöglichkeiten logisch zu gruppieren.
Dies ist besonders dann hilfreich, wenn der Nutzer aus einer
langen Liste wählen muss. Gruppen dürfen nicht
verschachtelt werden. Über das Attribut label vergeben Sie
eine Menübeschriftung für die Gruppe von
Einträgen, die im Auswahlmenü als selbst nicht
auswählbare Überschrift angezeigt wird.
<select name="lacrimosa" multiple="multiple" size="10">
<optgroup label="CD">
<option>Angst</option>
<option>Einsamkeit</option>
<option>Satura</option>
<option>Inferno</option>
<option>Stille</option>
<option>Elodia</option>
<option>Fassade</option>
<option>Echos</option>
<option>Lichtgestalt</option>
</optgroup>
<optgroup label="CDS">
<option>Alles Lüge</option>
<option>Schakal</option>
<option>Stolzes Herz</option>
<option>Allein zu zweit</option>
<option>Der Morgen danach</option>
<option>Durch Nacht und Flut</option>
</optgroup>
<optgroup label="DCD">
<option>Live</option>
<option>Lichtjahre (DCD)</option>
</optgroup>
<optgroup label="EP">
<option>Lichtgestalten</option>
</optgroup>
</select>
Abb. 5.31: Mehrfachselektion bei einem gruppierten Auswahlmenü
Mehrzeilige Texteingabefelder: Der Elementtyp textarea
Das Element textarea erzeugt ein
mehrzeiliges Texteingabefeld. Benutzerprogramme sollten den
Elementinhalt als Anfangswert des Steuerelements verwenden und
diesen Text zu Beginn darstellen. Über die Attribute
rows und cols geben Sie die
Anzahl der sichtbaren Textzeilen beziehungsweise die sichtbare
Breite in durchschnittlicher Zeichenbreite an.
Zeilen, die länger sind als die sichtbare Breite, werden umbrochen. Darüber hinaus stellen Browser im Allgemeinen Rollbalken dar, falls der Inhalt länger wird als die Anzahl der sichtbaren Textzeilen.
<textarea name="statement" cols="40" rows="10">Inhalt</textarea>
Abb. 5.32: Mehrzeiliges Texteingabefeld mit Vorbelegung
Beschriftungen: Der Elementtyp label
Einige Steuerelemente haben bereits
automatisch eine zugehörige Beschriftung oder erhalten sie
mittels eines Attributs value, beispielsweise
Schaltflächen, während andere keine Beschriftung
haben.
Das Element label
dient der Beschriftung von Steuerelementen, die keine implizite
Beschriftung haben.
Eine Verwendung des label-Elements
demonstriert das Beispiel zu Kontrollkästchen auf Seite 217.
Dadurch wird ein direkter Bezug zwischen dem
Kontrollkästchen und der dazugehörigen Beschriftung
»Ich freue mich auf den Anruf eines
Vertriebsmitarbeiters.« hergestellt. In vielen Browsern ist
es dadurch möglich, das Kontrollkästchen auch durch
Klick auf die Beschriftung an- oder abzuwählen. Dient das
label-Element der Beschriftung
eines Eingabefelds, würde dieses bei Klick auf die
Beschriftung fokussiert werden. Auf die visuelle Gestaltung eines
Formulars hat das label-Element
standardmäßig keinen direkten Einfluss, wenngleich sich
dies mit CSS natürlich ändern ließe.
Der Bezug zwischen Beschriftung und Steuerelement lässt sich auch dann
herstellen, wenn diese im Quelltext durch Markup voneinander
getrennt sind, beispielsweise durch eine Layouttabelle zur
übersichtlichen Anordnung der Formularelemente. In diesem
Fall vergeben Sie dem Steuerelement eine eindeutige ID und
referenzieren es über das Attribut for im label-Element.
<table>
<tr>
<td><label for="name">Name</label></td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td><label for="e-mail">E-Mail</label></td>
<td><input type="text" name="e-mail" id="e-mail" /></td>
</tr>
<tr>
<td><label for="nachricht">Ihre Nachricht</label></td>
<td><textarea name="nachricht" id="nachricht" cols="30"
rows="7"></textarea></td>
</tr>
</table>
Abb. 5.33: label-Elemente erhöhen die Benutzerfreundlichkeit Ihrer Formulare
Struktur: Die Elementtypen fieldset und legend
Das Element fieldset gestattet es
Webautoren, thematisch zusammengehörige Formularinhalte zu
gruppieren. Über das Element legend wird der Gruppe
ein Name verliehen, der die Funktion einer Überschrift
erfüllen kann.
Bedingung 12.3 der BITV fordert:
»Große Informationsblöcke sind mittels Elementen der verwendeten Markup-Sprache in leichter handhabbare Gruppen zu unterteilen.«
Eine Gruppierung vereinfacht Nutzern die
Orientierung innerhalb eines Formulars und dessen Bedienung, vor
allem dann, wenn dieses besonders umfangreich ist; die
Beschriftung verbessert darüber hinaus die
Zugänglichkeit, wenn das Formular nicht visuell ausgegeben
wird. Die meisten Browser visualisieren das fieldset-Element
als Rahmen um die darin enthaltenen Formularelemente.
<form action="http://www.example.org/kontakt">
<fieldset>
<legend>Persönliche Angaben</legend>
<!-- Auszeichnungs- und Steuerelemente -->
</fieldset>
<!-- Weitere Gruppen -->
</form>
Abb. 5.34: Gruppierung von Steuerelementen mittels fieldset