Handbuch Webdesign: Formulare
Aus Wikibooks
[Bearbeiten] Formulare
Inhaltsverzeichnis |
Folgende Übung ist zu dieser Buchseite verfügbar:
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. Formularen ermöglichen mehr Interaktion – aber immer noch in einem sehr strengen, sehr strukturierten Rahmen. Abbildung 78 zeigt zwei typische Anwendungsgebiete für Web-Formulare: das Eingabeformular der Suchmaschine Google und ein Bestellformular.
Mit den HTML-Tags <form>, <input>, <textarea>, <option>, <select> werden Formulare gebaut. Ein einfaches Beispiel zeigt Abbildung 79
<form method="get" action="newsletter-bestellung.cgi"><p> Bitte schicken Sie den Newsletter an die <label>E-Mail <input type="text" name="email" /></label> <br /> <input type="submit" value="Ja, ich will" /> </form>
Der <form>-Tag ist "e;unsichtbar"e; 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. Abbildung 80 zeigt wie Formular dessen Code das in Abbildung 79 gezeigt wurde im Browser dargestellt wird.
[Bearbeiten] Eingabefelder
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 einzelne Fragen die mit Ja oder Nein zu beantworten sind 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 "e;Zurücksetzen"e;-Button sollten Sie nur sehr selten einsetzen. Warum"e; Denken Sie an Ihre eigene Erfahrung mit Web-Formularen zurück: Wie oft haben Sie auf einen "e;Zurücksetzen"e;-Button gedrückt und dann gedacht "e;super, alles gelöscht, genau das wollte ich"e;, und wie oft haben Sie auf einen "e;Zurücksetzen"e;-Button gedrückt und dann gedacht "e;Mist, das war ja gar nicht der Einsende-Button, jetzt muss ich alles nochmal tippen."e;
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. | |
| Datei:Handbuch Webdesign-Formularfelder 13.jpg | <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 dne Webserver geschickt werden, nicht aber bei Versand per E-Mail | |
 |
Wählen Sie ein Bild aus: <input type="file" name="bilddatei"> |
[Bearbeiten] Sinnvoller Einsatz der Eingabefelder
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 "e;Mindestbestellmenge"e; für jede Sorte ist jeweils eine Kiste. Durch das Einfügen einer "e;Leer"e;-Option in die Menüs wird diese Einschränkung aufgehoben.
[Bearbeiten] Formulare erstellen mit Dreamweaver
Dreamweaver zeigt in der Entwurfsansich den <form> - Tag eines Formulars als rote, strichlierte Linie. Abbildung 82 zeigt die Darstellung in Dreamweaver und im Browser:
Achten Sie auf die strichlierte Linie, dann können Sie einen der häufigsten Fehler beim Erstellen von Formularen vermeiden: mehrere <form>-Tags für ein und dasselbe Formular, wie in Abbildung 83 gezeigt.
Welche Auswirkung hat der in Abbildung 83 gezeigt Fehler? Wenn der Absende-Button betätigt wir, werden nur die Daten aus dem <form>-Tag gesendet, in dem sich der Absende-Button selbst befindet. Die Daten aus dem Text-Eingabefeld und von den Radio-Buttons werden in diesem Fall nicht gesendet.
Im Fenster "e;Einfügen" gibt es eine eigene Abteilung für Formulare, wie in Abbildung 84 gezeigt.
Das 9. (in der Abbildung hervorgehobene) Symbol fügt nicht nur ein Formularfeld ein, sondern ein ganzes "e;Sprungmenü"e; – das ist ein Kombination aus Formular, Menü als Eingabeelement und einem Javascript-Programm. Wenn die LeserIn aus dem Menü einen Eintrag auswählt wechselt der Browser auf eine andere Webseite. Es handelt sich also um ein Navigationselement, das nicht innerhalb von anderen Formularen verwendet werden sollte!
Jedes Eingabefeld erhält einen Namen. Der Name wird über das Eigenschafts-Fenster von Dreamweaver eingegeben, wie in Abbildung 85 gezeigt.
[Bearbeiten] Formulardaten absenden
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 "e;Lieferadresse"e;, "e;Strasse"e;, "e;PLZ"e; und "e;Ort"e;. Die Benennung der Eingabefelder ist in diesem Beispiel nicht gut gelungen, Abbildung 87 zeigt eine verbesserte Version.
Wohin / an wen werden die Daten aus dem Webformular gesendet"e; Um das zu erklären müssen wir noch einmal kurz die Begriffe "e;Client"e; und "e;Server"e; wiederholen:
Als "e;Client"e; wird ein Programm bezeichnet, das einen Internet-Dienst in Anspruch nimmt. Beim Internet-Dienst "e;World Wide Web"e; ist der Client also der Web-Browser. Manchmal wird auch der ganze Computer, auf dem das Programm läuft, als Client bezeichnet.
Als "e;Server"e; wird ein Programm bezeichnet, das einen Internet-Dienst anbietet. Ein Webserver liefert also auf Anfrage Webseiten. Manchmal wird auch der ganze Computer, auf dem der Webserver läuft, als Server bezeichnet. HTTP ist das Protokoll, die Vorschrift, wie Web-Browser und Webserver miteinander kommunizieren. Das Diagramm in Abbildung 88 zeigt den "e;normale"e; Ablauf von HTTP: Der Browser stellt eine Anfrage an den Webserver, der Webserver liefert als Antwort ein HTML-Dokument, der Browser stellt das Dokument dar.
Mit Webformularen wird dieser Ablauf etwas komplizierter: Nun kann der Webbrowser nicht nur eine Anfrage nach einem Dokument stellten, er kann dabei auch Daten mitschicken "e; nämlich die Daten, die ins Formular eingegeben wurden.
HTTP +
Programm am Server
Wohin / an wen werden die Daten gesendet? Die URL (des Programmes) wird im action-Attribut des <form>-Tags angegeben, und endet meist mit der Endung .cgi oder .php.
<form action="http://webwelt.horus.at/html/form/echo.cgi">
Das Programm am Webserver verarbeitet die Daten, und liefert als Ergebnis eine Webseite, 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.
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önnne Sie als Alternative die Daten per E-Mail verschicken. So sieht der entsprechende HTML-Code des Formulars aus:
<form action="mailto:ich@uni.ac.at"
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.
In Dreamweaver geben Sie diese Attribute des form-Tags wie in Abbildung 91 gezeigt über das Eigenschafts-Fenster ein. In älteren Versionen von Dreamweaver gibt es kein Eingabefeld für das Attribut enctype.
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. Das Versenden der Daten per HTTP an den Webserver, und das Verarbeiten der Daten mit einem Programm am Server ist also die zuverlässigere Methode.
[Bearbeiten] Zusammenfassung und Ausblick
Das Thema Webformulare ist damit ausführlich behandelt. 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).
