Handbuch Webdesign: Formulare

Aus Wikibooks
Wechseln zu: Navigation, Suche
Nuvola apps bookcase 1.svg Handbuch Webdesign Gnome-mime-application-x-dvi.svg 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 &quote;normalen&quote; HTML-Tags auf. Tabelle 8 zeigt die verschiedene Arten von Text-Eingabefeldern.

Textfeld:
Handbuch Webdesign-Formularfelder 02.jpg <input type="text"
name="meintextfeld"
value="text eingeben" />
Passwort-Feld:
Handbuch Webdesign-Formularfelder 03.jpg <input type="password"
name="meinpasswort" />
mehrzeiliges Textfeld = Textbereich
Handbuch Webdesign-Formularfelder 04.jpg <textarea name="zitat">
In a hole in the ground
there lived a Hobbit.
</textarea>
Tabelle 8: Text-Eingabefelder

Für Ja-oder-Nein-Fragen wird das Eingabe-Element &quote;checkbox&quote; verwendet, siehe Tabelle 9.

Handbuch Webdesign-Formularfelder 05.jpg <input
type="checkbox"
name="rauch" /> Raucher
Tabelle 9: Checkbox für Ja-/Nein-Fragen

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
Handbuch Webdesign-Formularfelder 06.jpg <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ü
Handbuch Webdesign-Formularfelder 07.jpg <select name="size2">
<option>XL</option>
<option selected>L</option>
<option>M</option>
<option>S</option>
</select>
Menü mit "leer"- Auswahl
Handbuch Webdesign-Formularfelder 08.jpg <select name="size3">
<option>---Bitte Auswählen---</option>
<option>XL</option>
<option>L</option>
<option>M</option>
<option>S</option>
</select>
Liste
Handbuch Webdesign-Formularfelder 09.jpg <select name="html" size="4" multiple>
<option>im Code</option>
<option>Dreamweaver</option>
<option>GoLive</option>
<option>Frontpage</option>
</select>
Tabelle 10: Eingabeelemente für Fragen mit mehreren Antworten

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
Handbuch Webdesign-Formularfelder 10.jpg <input type="submit"
value="dr&uuml;ck mich!" />
Zurücksetzen-Button
Handbuch Webdesign-Formularfelder 11.jpg <input type="reset"
value="Zur&uuml;cksetzen" />
Tabelle 10: Eingabeelemente für Fragen mit mehreren Antworten

Tabelle 11: Eingabefelder Absenden und Zurücksetzen Ohne Absende-Button können die Daten nicht zur weiteren Verarbeitung übermittelt werden.

Zurücksetzen?
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
Handbuch Webdesign-Formularfelder 12.jpg <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
Handbuch Webdesign-Formularfelder 14.jpg

<fieldset> <legend>Kreditkarte</legend>
<input name="nr"><br>
<input type="radio" name="kk"
value="Master"> Master
<input type="radio" name="kk"
value="Visa"> Visa <br>
</fieldset>

Datei-Upload, funktioniert nur wenn die Formular-Daten an den Webserver geschickt werden, nicht aber bei Versand per E-Mail
Handbuch Webdesign-Formularfelder 15.jpg Wählen Sie ein Bild aus:
<input type="file" name="bilddatei">
Tabelle 12: selten verwendete Eingabefelder

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.

Handbuch Webdesign-Formularfelder 16.jpg

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.

Handbuch Webdesign-Formularfelder 17.jpg 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.

Handbuch Webdesign-Formularfelder 18.jpg Version 3: Diese Version ermöglicht die Reservierung von beliebigen vielen Zimmern in allen Kombinationen.
Handbuch Webdesign-Formularfelder 19.jpg Version 4: Durch ein zusätzliches Textfeld können alle weiteren Probleme abgefangen werden
Abbildung 81: Entwürfe für ein Zimmer-Reservierungs-Formular

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.

Handbuch Webdesign-Formularfelder 20.jpg Handbuch Webdesign-Formularfelder 21.jpg
Tabelle 13: Entwürfe für ein Getränke-Bestell-Formular

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).

Handbuch Webdesign-Formulare 26.gif
Abbildung 86: Formular und gesendete Daten – Standard-Namen

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.

Handbuch Webdesign-Formulare 27.gif
Abbildung 87: Formular und gesendete Daten – sprechende Namen für Eingabefelder

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.

Handbuch Webdesign-Formulare 30.gif
Abbildung 89: Formulardaten werden über HTTP an ein Programm am Webserver versandt

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önnne 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.

Handbuch Webdesign-Formulare 31.gif
Abbildung 90: Formulardaten werden per E-Mail versandt

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 Programmier­sprachen und Schnittstellen, die bekanntesten wären die Sprache Perl über die Programmier­schnittstelle 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]

Wikiversity

Folgende Übung ist zu dieser Buchseite verfügbar: