Anwendersoftware Thema 7 Dialoggestaltung mit HTML-Formularen Sommersemester 2016 - Dr. Henry Herper
HTML - Formulare Formulare bieten die Möglichkeit, innerhalb einer HTML-Seite Daten zu erfassen und diese an den Eigentümer der Seite zu senden. Weiterhin ist es mit Formularen möglich, bestimmte Bereiche eine HTML-Seite mit Namen zu versehen und diese dann zur Clientseitigen Verarbeitung der Daten, z.b. mit Javascript zu nutzen. 2
HTML - Formulare Formulare in einer Webseite werden im Rahmen des DOM-Konzeptes in einem Objektfeld mit Namen forms geführt, dessen Bestandteile Objekte vom Typ form sind. Ein Formular wird aus HTML-Sprachelementen erzeugt. Es besteht aus dem FORM-Container, der durch die Tags: <form> </form> gebildet wird. Im FORM-Tag werden noch Attribute für die Auswertung und die Übertragungsmethode angegeben. Das ACTION-Attribut legt fest, wohin die erfassten Informationen geschickt werden sollen. Als Voreinstellung wird das Dokument selbst verwendet. Mit dem METHOD-Attribut wird festgelegt, welche HTTP- Methode der Browser unterstützt. Es stehen die Methoden post und get zur Verfügung, die Methode get ist voreingestellt. 3
HTML - Formulare Eigenschaften eines Formularobjektes Eigenschaft action elements encoding method name target Beschreibung URL oder Mailadresse der Zieldaten, kann über JavaScript ausgelesen werden Objektrepräsentation aller Formularelemente legt den Codierungstyp des Formulars fest Art der Verarbeitung der Daten, in der Regel get oder post Name der Formulars, Grundlage für den Javascript-Zugriff Ziel für die Antwort vom Webserver Methoden eines Formularobjektes Methoden reset() submit() Beschreibung Rücksetzen aller Eingaben im Formular, Herstellen des Anfangszustandes Versenden der Daten im Formular 4
HTML Formulare - Input Zur Definition eines einfachen Textfeldes wird das Tag <input> verwendet. Es muss innerhalb von <form>-tags stehen. Im <input>-tag werden angegeben: Feldname (name= feldname ) Feldlänge (size= laenge ) Feldtyp (type= feldtyp) Feldtypen können sein: int Ganzzahlen, float Dezimalkommazahlen, date Kalenderdatum, URL url- Angabe, Passwort verdeckte Eingabe. 5
HTML Formulare - Textfelder Man kann vom Nutzer auch mehrzeilige Textfelder ausfüllen lassen. Diese werden z.b. zur Übermittlung von Kommentaren oder Bemerkungen verwendet. Zum Einfügen in die Seite wird das <textarea>-tag verwendet. Die Größe des einzustellenden Fensters wird mit den Attributen ROWS für die Anzahl der Zeilen und COLS für die Anzahl der Zeichen pro Zeile (bei der Verwendung von nichtproportionaler Schrift). Werden mehr Zeilen oder Zeichen eingegeben, als bei der Formulardefinition voreingestellt, so scrollt der Text in der Regel automatisch. Im übertragenen Text werden die <ENTER> (Zeilenumbrüche) als %0D%0A und die Leerzeichen als + dargestellt. Der zwischen den Tags <textarea> und </textarea> eingetragene Text wird zur Initialisierung verwendet. 6
HTML Formulare - Operationsfelder Operationsfelder werden durch Angabe des Arguments TYPE=radio im Input-Tag definiert. Es wird eine Gruppe von Eingabefeldern verbunden, von denen genau ein Feld ausgewählt werden kann. Diese Operationsfelder werden als Radiobutton bezeichnet. Ein Eingabefeld kann mit dem Argument CHECKED versehen werden. Beispiel: <input type=radio name=wahlfach value="datenbanken"> <input type=radio name=wahlfach value="simulationstechnik" checked> Die Zusammenfassung zu einer Gruppe wird realisiert, indem für eine Gruppe identische Feldnamen verwendet werden. Der Value- Parameter gibt an, welche Information als ausgewählt übertragen wird. 7
HTML Formulare - Auswahlfelder Soll die Auswahl von mehr als einer Option möglich sein, so ist die Verwendung von Auswahlfeldern zweckmäßig. Dazu wird als type=checkbox angegeben. Mit checked kann eine Voreinstellung vorgenommen werden. Es besteht die Möglichkeit, den Auswahlfeldern entweder gleiche oder verschieden Namen zu geben. Beispiel: <input type=checkbox name=schleife value="while DO"> 8
HTML Formulare - Bereichsfelder Menüs sind Auswahlelemente, die weniger Bildschirmplatz verbrauchen als Optionsfelder. Mit den Tags <select>... </select> wird das Menü gekennzeichnet. Die einzelnen Menüeinträge werden hinter dem Tag <options> angegeben. Der hinter options angegebene Text wird im Menü-Fenster angezeigt und übertragen. Wird zusätzlich der Value-Parameter angegeben, so wird dieser Wert übertragen. Sollen mehrere Werte auswählbar sein, so muss bei <select> als Option multiple angegeben werden. Nicht alle Browser unterstützen diese Option. 9
HTML Formulare - Kommunikationselemente Wird bei <input type=submit> angeben, so wird die browserspezifische Darstellungsform gewählt. Entsprechend der gewählten Installation kann das z.b. Submit Query oder Anfrage senden sein. Durch Angabe der Option VALUE kann die Anzeige des Submit- Button verändert werden. Es können auch verschiedene Submit- Button mit unterschiedlichen Name-Attributen genutzt werden. <input name = standard value="datenübertragung" type = submit > Soll in einem Formular die Möglichkeit bestehen, es auf seine Ausgangswerte zurückzusetzen, so wird der Reset-Schalter <input type = reset>. 10
HTML Formulare - Kommunikationselemente Zur Identifikation von übermittelten Informationen kann es zweckmäßig sein, eine Kennung in das Formular einzubinden. Dazu können Informationen übertragen werden, die dem Betrachter der Seite nicht angezeigt werden. Beispiel: <input type=hidden name = Codierung value = "012345"> 11
HTML Formulare - Kommunikationselemente Es besteht die Möglichkeit, beliebige Schaltelemente einzufügen, die z.b. Javascript-Code aktivieren können. Beispiel: <input type = "button" name="knopf" value= Hilfe onclick ="alert( Hilfe nicht verfügbar')" > 12
HTML Formulare - Kommunikationselemente HTML-Formulare bieten die Möglichkeit, Passwörter abzufragen. Diese werden bei der Eingabe nicht auf dem Bildschirm angezeigt. Bei der Eingabe wird als Typ password angegeben. <input type=password name = pswd > Ein Problem besteht jedoch darin, dass die Passwörter unverschlüsselt übertragen werden und damit offen vorliegen. 13
Kontrollfragen 1. Welche HTML-Elemente können in einer Seite verwendet werden, um Informationen vom Leser zu erfassen und z.b. als Mail zurückzusenden? 2. Welche Kommunikationselemente stehen in HTML-Formularen zur Verfügung? Beschreiben Sie 2 ausgewählte Formularkomponenten unter Angabe der Syntax. Erstellen Sie ein HTML-Formular, mit dem es möglich ist, die Adresse eines Kunden zu erfassen. 3. Erstellen Sie ein HTML-Formular, mit dem es möglich ist, die Daten für eine Fahrplanauskunft zu erfassen. Folgende Daten sind zu erfassen: Startort, Zielort, Abfahrtsdatum, Abfahrtszeit, einfache Fahrt (standardmäßig ausgewählt)/ Hin- und Rückfahrt über Kontrollkästchen. Die Daten sind per Mail an auskunft@auskunftssystem.de zu senden. 14
Literatur /Born00/ /Ernst04/ /Fries02/ /Lankau01/ /SELFHTML/ Born, Günther; HTML-Kompendium Markt & Technik Verlag, 2000 ISBN 3-8272-5830-8 Ernst, Wolfgang; Jeanette Kugler; Web-Desig in der Schule; paetec-verlag, 2004 ISBN 3-89818-605-9 Fries, Christian; Mediengestaltung; Fachbuchverlag Leipzig, 2002ISBN 3-446-21860-2 Lankau, Ralf; Webdesign und publishing Carl Hanser Verlag München Wien, 2001 ISBN 3-446-21648-0 http://de.selfhtml.org/ 15