Handbuch Webdesign: Formulare
Mit Ihren bisherigen Kenntnissen können Sie schon Webseiten mit einfachen Interaktions-Möglichkeiten gestalten: mit Links und Hotspots ermöglichen Sie der LeserIn die Navigation durch das Web. Wenn Sie aber wollen, dass ihre Besucher mit ihnen interagieren, also bspw. Waren in einem Online-Shop bestellen, einen Beitrag kommentieren oder über etwas abzustimmen, dann brauchen Sie Formulare.
Formulare in HTML
[Bearbeiten]Mit den HTML-Tags <form>, <input>, <textarea>, <option>, <select> werden Formulare gebaut. Ein einfaches Beispiel:
<form method="get" action="newsletter-bestellung.cgi">
Bitte schicken Sie den Newsletter an die
<label>E-Mail <input type="text" name="email" /></label>
<br />
<input type="submit" value="Ok" />
</form>
Der <form>-Tag ist für den Betrachter unsichtbar und dient nur dazu die anderen Eingabefelder zu bündeln. Im Action-Attribut des <form>-Tags wird angegeben, an welches Programm die Daten zur Verarbeitung geschickt werden.
Eingabefelder
[Bearbeiten]Innerhalb des <form>-Tag bauen Sie das Formular aus verschiedenen Eingabeelementen und den "e;normalen"e; HTML-Tags auf. Tabelle 8 zeigt die verschiedene Arten von Text-Eingabefeldern.
| Textfeld: | |
|
<input type="text" name="meintextfeld" value="text eingeben" /> |
| Passwort-Feld: | |
|
<input type="password" name="meinpasswort" /> |
| mehrzeiliges Textfeld = Textbereich | |
|
<textarea name="zitat"> In a hole in the ground there lived a Hobbit. </textarea> |
Für Ja-oder-Nein-Fragen wird das Eingabe-Element "e;checkbox"e; verwendet, siehe Tabelle 9.
|
<input type="checkbox" name="rauch" /> Raucher |
Für Frage, bei denen (eine von) mehreren vorgegebenen Antwort möglich sein soll gibt es verschiedene Eingabeelemente, die in Tabelle 10 gezeigt werden.
| Radiobuttons | |
|
<input type="radio" name="size" value="XL" /> XL <input type="radio" name="size" value="L" /> L <input type="radio" name="size" value="M" /> M <input type="radio" name="size" value="S" checked /> S |
| Menü | |
|
<select name="size2"> <option>XL</option> <option selected>L</option> <option>M</option> <option>S</option> </select> |
| Menü mit "leer"- Auswahl | |
|
<select name="size3"> <option>---Bitte Auswählen---</option> <option>XL</option> <option>L</option> <option>M</option> <option>S</option> </select> |
| Liste | |
|
<select name="html" size="4" multiple> <option>im Code</option> <option>Dreamweaver</option> <option>GoLive</option> <option>Frontpage</option> </select> |
Radiobuttons die zu einer Frage gehören müssen den selben Namen tragen. der Wert ist unterschiedlich (im Code: name ist gleich, value unterschiedlich). Nur bei einer Liste besteht die Möglichkeit mehrere Antworten auszuwählen. Für alle Eingabefelder gibt: falls auch "keine Antwort" möglich sein soll müssen Sie dafür eine eigene Option einbauen. Jedes Formular braucht einen Absende-Button wie in Tabelle 11 gezeigt.
| Absende-Button | |
|
<input type="submit" value="drück mich!" /> |
| Zurücksetzen-Button | |
|
<input type="reset" value="Zurücksetzen" /> |
Tabelle 11: Eingabefelder Absenden und Zurücksetzen Ohne Absende-Button können die Daten nicht zur weiteren Verarbeitung übermittelt werden.
Nein Danke!
Den Zurücksetzen-Button sollten Sie nur sehr selten einsetzen. Wie oft haben Sie auf einen "Zurücksetzen"-Button gedrückt und dann gedacht "super, alles gelöscht, genau das wollte ich", und wie oft haben Sie auf einen Zurücksetzen-Button gedrückt und dann gedacht "Mist, das war ja gar nicht der Einsende-Button, jetzt muss ich alles nochmal tippen."?
Tabelle 12 zeigt noch mehr Eingabefelder, die eher selten gebraucht werden.
| Unsichtbares = Verstecktes Feld | |
| <input type="hidden" name="webseite" value="www.students" /> | |
| Button ohne Auftrag, für Javascript-Programme | |
|
<input type="button" value="Extrafenster" onClick="..Javascript hier.."> |
| Bildfeld, liefert Koordinaten. | |
| <input type="image" border="0" name="position" src="austria.gif" width="150" height="64"> | |
| Visuelle Zusammenfassung mehrerer Felder: fieldset + legend | |
 |
<fieldset> <legend>Kreditkarte</legend> |
| Datei-Upload, funktioniert nur wenn die Formular-Daten an den Webserver geschickt werden, nicht aber bei Versand per E-Mail | |
|
Wählen Sie ein Bild aus: <input type="file" name="bilddatei"> |
Sinnvoller Einsatz der Eingabefelder
[Bearbeiten]Aus diesen Eingabeelementen ist jedes Web-Formular aufgebaut. Die Problematik der Formulare liegt nicht in der Kenntnis der Eingabefelder, sondern im Entwurf der Interaktionsmöglichkeiten. Im Folgenden sehen Sie eine Reihe von Entwürfen eines Reservierungs-Formulars für ein Hotel.
|
|
Version 1: Ein Menü ermöglicht die Auswahl aus vorgegebenen Elementen.
Mit diesem Formular kann man nur ein, nicht aber zwei oder mehr Zimmer reservieren. |
|
Version 2: Ein Text-Eingabefeld ermöglicht hier die Eingabe der Anzahl der Zimmer.
Es ist aber nicht möglich ein Einzel- plus ein Doppel-Zimmer zu reservieren. |
|
Version 3: Diese Version ermöglicht die Reservierung von beliebigen vielen Zimmern in allen Kombinationen. |
|
Version 4: Durch ein zusätzliches Textfeld können alle weiteren Probleme abgefangen werden |
Bei der Verwendung von Checkboxen, Radiobuttons, Menüs und Listen geben Sie genau vor, welche Möglichkeiten die LeserIn hat. Wenn Sie beim Entwurf des Formulars eine Möglichkeit vergessen kann die LeserIn nichts mehr daran ändern. Deswegen ist hier besondere Sorgfalt geboten. Eine besonders häufige Auslassung zeigt Tabelle 13.
 |
|
Der linke Entwurf in Tabelle 13 lässt keine Bestellung nur einer Sorte Bier zu. Die "Mindestbestellmenge" für jede Sorte ist jeweils eine Kiste. Durch das Einfügen einer "Leer"-Option in die Menüs wird diese Einschränkung aufgehoben.
Formulardaten absenden
[Bearbeiten]Was passiert, wenn Sie ein Formular ausfüllen und auf den Absende-Button drücken? Die Namen der Eingabefelder und die Daten die eingegeben wurden, werden zur weiteren Verarbeitung versendet. Abbildung 86 zeigt ein Formular, und die Daten die von diesem Formular versendet werden (in einer Darstellung die die Web-Developers-Toolbar des Browsers Firefox liefert).
Beachten Sie dabei: Der restliche Inhalt der Webseite, also z.B. der erklärende Text, der neben den Eingabefeldern steht, wird nicht gesendet. In diesem Beispiel also "Lieferadresse", "Strasse", "PLZ" und "Ort". Die Benennung der Eingabefelder ist in diesem Beispiel nicht gut gelungen, Abbildung 87 zeigt eine verbesserte Version.
Wohin wen werden die Daten gesendet? Die URL (des Programmes) wird im action-Attribut des <form>-Tags angegeben.
Der Server muss die Daten verarbeiten und als Ergebnis eine neue Webseite liefern, die wieder vom Browser angezeigt wird. Das Diagramm in soll diesen Ablauf verdeutlichen.
Die Daten werden vom Browser an den Webserver übermittelt. Der Webserver startet in diesem Fall ein weiteres Programm, z.B. ein CGI-Skript, und übergibt die Daten an dieses Programm. Das Programm verarbeitet die Daten und liefert als Ergebnis, als Output, ein HTML-Dokument, an das Webserver-Programm zurück. Das Webserver-Programm übermittelt das HTML-Dokument an den Browser, der es darstellt.
Formulare per E-Mail
[Bearbeiten]Wenn Sie nicht über ein geeignetes Programm am Webserver verfügen (weder ein fertiges Programm, noch die Möglichkeit es selbst zu programmireren) dann können Sie als Alternative die Daten per E-Mail verschicken. So sieht der entsprechende HTML-Code des Formulars aus:
<form action="mailto:formular@example.com"
method="post"
enctype="text/plain">
Bei dieser Vorgehensweise werden die Daten vom Browser an ein (ebenfalls am Client) installiertes E-Mail Programm übergeben. Dieses E-Mail Programm übernimmt das versenden der daten an die Ziel-Adresse.
Achtung: Das Versenden der Daten per E-Mail kann aus verschiedensten Gründen schief gehen. Zum Beispiel weil ein Browser, aber kein E-Mail Programm installiert ist. Oder weil das E-Mail Programm zwar installiert, aber das Zusammenspiel zwischen Webbrowser und E-Mail Programm nicht korrekt konfiguriert ist.
Zusammenfassung und Ausblick
[Bearbeiten]Der nächste logische Schritt ist die Erstellung eines Programms am Webserver, das Formulardaten verarbeiten kann. Dafür gibt es verschiedene Programmiersprachen und Schnittstellen, die bekanntesten wären die Sprache Perl über die Programmierschnittstelle CGI. Eine Alternative wäre die Sprache PHP. Mit der Programmiersprache Javascript können die Formulardaten vor dem Versendenden aus dem Browser geprüft werden (Außer Javascript ist deaktiviert – dann entfällt die Prüfung).
Quellen
[Bearbeiten]
Übungen
[Bearbeiten]
Folgende Übung ist zu dieser Buchseite verfügbar: