VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer. Kommunikation I (Internet) Übung 5. Formulare und mehr

Transkript

1 VWA Rhein-Neckar Dipl.-Ing. Thomas Kloepfer Kommunikation I (Internet) Übung 5 Formulare und mehr SS 2003

2 Inhaltsverzeichnis 5. Formulare und mehr Formulare Erstellen eines einfachen Formulars Der action - Parameter Der method - Parameter Conainer - Elemente für Formulare Aufgabe 1 Einfaches Formular mit Eingabefeld Aufgabe 2 Formular mit Textfeld Aufgabe 3 Formular mit Auswahlbox Aufgabe 4 Formular mit Radiobuttons Aufgabe 5 Checkboxen Aufgabe 6 Elemente Gruppieren Aufgabe 6 Daten des Formulars absenden Aufgabe 7 Die Auswertungsseite JavaScript die clientseitige Programmiersprache JavaScript - Bereiche in HTML definieren Das "Hello World" in JavaScript Mouseover mit JavaScript PHP - die Serverseitige Skriptsprache Hello World in PHP Formular mit Auswertung in PHP...14 Uebung5.doc

3 Formulare 5. Formulare und mehr 5.1. Formulare HTML stellt die Möglichkeit zur Verfügung mit Hilfe spezieller Tags Formulare zu erstellen. In Formularen kann der Anwender Eingabefelder ausfüllen, in mehrzeilige Textfelder Text eingeben, aus Listen Einträge auswählen und Buttons anklicken. Wenn das Formular fertig ausgefüllt ist, kann der Anwender auf einen Button Klicken, um das Formular abzusenden. Dazu muss beim Erstellen des Formulars angegeben werden, was mit den Daten des ausgefüllten Formulars geschehen soll. Die Daten können beispielsweise per E - Mail verschickt werden, oder über ein CGI - Programm auf dem Webserver weiterverarbeitet werden. Es greifen also zwei Mechanismen zusammen. Zum Einen wird eine HTML - Seite mit einem Formular zum Sammeln der Daten erzeugt, zum Anderen wird ein Programm oder Script benötigt, daß die Weiterverarbeitung vornimmt Erstellen eines einfachen Formulars Zunächst schauen wir uns mal den <form> - Container an, der das Formular enthält: <form action="url" method="get">... </form> Der action - Parameter Zwei Parameter sind beim <form> - Tag anzugeben. Der action - Paramter enthält eine URL. Hier ist hinterlegt, welche Seite nach Abschicken des Formulars aufgerufen werden soll, bzw. welches Programm/ CGI-Skript die Verarbeitung der Daten vornehmen soll Der method - Parameter Eine weiterer Parameter ist der method - Parameter. Dabei bestimmen Sie, nach welcher HTTP- Übertragungsmethode die Formulardaten an ihr Ziel gelangen. Dabei gibt es zwei Möglichkeiten: Bei method="get" werden die Daten des ausgefüllten Formulars als Parameter an die Aufrufadresse angehängt. Die Anfrage, die beim Server eintrifft, sieht dann beispielsweise so aus: +ist+ein+kleiner+text. Bei method="post" werden die Daten des ausgefüllten Formulars vom Web-Server über den Standardeingabekanal zur Verfügung gestellt, und ein auswertendes CGI-Script muß die ankommenden Daten behandeln wie eine Benutzereingabe, die auf der Kommandozeile gemacht wurde (post = verschicken). Bei CGI-Scripts müssen Sie diese Methode auf jeden Fall dann verwenden, wenn das Script die POST-Methode verarbeitet, und wenn die Formulardaten zu umfangreich für die GET-Methode sind. Uebung5.doc

4 Formulare Conainer - Elemente für Formulare Folgende Container sind innerhalb des <form> - Containers möglich: <input>.. </input> Ein einfaches Eingabefeld <texarea>.. </texarea> Mehrzeiliges Texeingabefeld <select>.. <option>.. <option>.. </select> Listen - Auswahlbox <optgroup>.. </optgroup> Verschachtelte Auswahllisten (nicht zu empfehlen) <button>.. </button> Klick - Buttons <fieldset>.. </fieldset> zusammenfassen von Elementgruppen Aufgabe 1 Einfaches Formular mit Eingabefeld Wir wollen zunächst ein einfache Formular mit nur zwei Eingabefeldern. Bei diesem Formular kümmern wir uns zunächst nicht um die Auswertung der Daten. Es geht hier erst einmal darum mit den Elementen von Formularen vertraut zu werden. Einfaches Formular mit zwei Eingabefeldern Erreicht wird das mit dem <form> - Container, der zwei <input> - Marker enthält. Der <input> - Marker besitzt noch folgende Parameter: name - Jedes Feld muß einen eindeutigen Namen haben, nur so kann hinterher die Eingabe weiterverarbeitet werden. mit dem Parameter name wird der Variablenname definiert, den die Eingabe aufnehmen soll. type - bestimmt den Typ des Eingabe - Elements. Möglich sind text password checkbox radio submit reset file hidden image button size - bestimmt die Größe des Eingabefeldes. maxlength - bestimmt die maximale Länge der eingegebenen Daten Uebung5.doc

5 Formulare Die entsprechende Codesequenz für das Formular sieht wie folgt aus: <form action="auswertung.html" method="get"> <p>vorname:<br> <input name="vorname" type="text" size="30" maxlength="30"> </p> <p>zuname:<br> <input name="zuname" type="text" size="30" maxlength="40"> </p> </form> Aufgabe 2 Formular mit Textfeld Wir wollen nun ein Formular mit einem mehrzeiligen Textfeld erstellen. Formular mit Textfeld Neben dem obligatorischen <form> - Container verwenden wir den <textarea> - Container. Der <textarea> - Tag hat folgende Parameter: name - Jedes Feld muß einen eindeutigen Namen haben. Das gilt natürlich auch für ein Textfeld. Analog zum Eingabefeld wird der hier vergebene Name zu der Variablen, der die Daten des Textfeldes aufnimmt. cols - enthält die Anzahl der Zeichen, die das Textfeld in der Breite anzeigen soll. rows - enthält die Anzahl der Zeilen, die das Texfeld in der Höhe anzeigen soll. Das entsprechende Codesegment: <form action="auswertung.html" method="get"> <p>textfeld:<br> <textarea name="texfeld_eingabe" cols="30" rows="5"> </textarea> </p> </form> Uebung5.doc

6 Formulare Aufgabe 3 Formular mit Auswahlbox Erstellen Sie ein Formular mit Auswahlbox: Formular mit Auswahlbox Hierzu verwenden Sie zwei verschachtelte Tags. Den <select> - Tag und den <option> - Tag. Beides sind Container. Der <select> - Container muß dabei die einzelnen <option> - Container enthalten. Jeder <option> - Container erzeugt dabei eine Zeile in der Auswahlbox. der <select> - Container besitzt neben dem obligatorischen name - Parameter einen Parameter size mit dem die Höhe der Auswahlbox festgesetz wird. In der Breite richtet sich die Auswahlbox nach der Länge des längsten Eintrages. Hier wieder das Codesegment: <select name="select_eingabe" size="3"> <option>schallplatte</option> <option>cassette</option> <option>cd</option> <option>dvd</option> <option>vhs</option> <option>minidisc</option> </select> Aufgabe 4 Formular mit Radiobuttons Erstellen Sie folgendes Formular: Formular mit Radiobuttons Verwenden Sie den <input> -Marker mit dem Paramenter type="radio". Natürlich muß auch hier ein name - Parameter vorhanden sein. Zusätzlich ist aber jetzt noch ein value - Parameter nötig. Dieser Parameter gibt an, welcher Inhalt beim Auswählen in die name - Variable geladen werden soll. Uebung5.doc

7 Formulare Hier die komplette Codesequenz: <input type="radio" name="rundfunksender" value="hr1"> HR 1<br> <input type="radio" name="rundfunksender" value="swr3"> SWR 3<br> <input type="radio" name="rundfunksender" value="dlf"> Deutschland Funk Aufgabe 5 Checkboxen Erstellen Sie ein Formular mit Checkboxen: Formular mit Checkboxen Das funktioniert ganz analog zu den Radiobuttons. Ein Unterschied ist, daß Sie als Parameter type="checkbox" einstellen. Ausserden ist es ja jetzt möglich mehrere Checkboxen gleichzeitig auszuwählen, darum benötigen Sie auch mehrere verschiedene Variabelennamen (belag1..4), die sie jeweils über den name - Parameter angeben. Beachten Sie, daß Sie auch hier über den value - Parameter den Wert vorgeben müssen, der beim aktivieren der Checkbox übernommen werden soll. <input type="checkbox" name="belag1" value="salami"> Salami <br> <input type="checkbox" name="belag2" value="tomaten"> Tomaten<br> <input type="checkbox" name="belag3" value="pilze"> Pilze<br> <input type="checkbox" name="belag4" value="kaese"> Käse<br> Uebung5.doc

8 Formulare Aufgabe 6 Elemente Gruppieren Als nächstes wollen wir Elemente in einem Formular zu Gruppen Zusammenfassen. Das Formular soll in etwa so aussehen: Formular mit Gruppierung von Elementen Die einzelnen Felder für die Eingabe haben Sie ja schon kennengelernt. Es handelt sich um <input> - Marker mit dem Paramteter type="text". Die Gruppierung wird mit den Containern <fieldset> und <legelnd> erreicht. Alles was in einen <fieldset> - Container eingebettet ist wird zu einer Elementgruppe zusammen gefasst. In diesem Container wird eine weiterer Container <legend> plaziert, der die Beschriftung für die Elementgruppe enthält. Der Quellcode sieht wie folgt aus: <fieldset><legend><b>absender</b></legend> <p> Ihr Vorname:<br> <input type="text" size="40" maxlength="40" name="vorname"><br> Ihr Zuname:<br> <input type="text" size="40" maxlength="40" name="zuname"><br> </p> </fieldset> <fieldset> <legend><b>wunsch</b></legend> <p> Ihr Hauptwunsch:</br> <input type="text" size="40" maxlength="40" name="hauptwunsch"><br> Ihr Zusatzwunsch:<br> <input type="text" size="40" maxlength="40" name="zusatzwunsch"><br> </p> </fieldset> Uebung5.doc

9 Formulare Aufgabe 6 Daten des Formulars absenden Bei allen bisherigen Formularen gab es keine Möglichkeit, die Daten abzuschicken. Es wird dazu lediglich ein entsprechender Button benötigt. <input type="submit" value=" Absenden "> Ausserdem ist ein Button zum Rücksetzen des Formulars auch sinnvoll. Der entsprechende Code lautet: <input type="reset" value=" Abbrechen"> Fügen Sie in alle bisher erstellten Formulare diese zwei Buttons ein. Bei dem ersten Formular sollte es in etwa so aussehen: Formular mit Sende- und Abbrechen - Button Was nun noch fehlt ist die Einheit, die das Formular verarbeitet. Sie erinnern sich, das die entsprechende Angabe im <form> - Tag als Parameter action="url" übergeben werden muß. Für die Verarbeitung der Daten haben wir mit den bisher erstellten Formularen schon einige Vorarbeit geleistet. Die Formulare werden dazu benutzt die Daten einzusammeln. Jedes Element des Formulars, das Daten aufnehmen kann, ist über den name - Parameter einer Variablen zugeordnet. Der zweite wichtig Parameter im <form> - Tag war der method - Parameter, der entweder auf get oder post gesetzt werden kann. Wie schon erklärt sorgt method="get" dafür, daß die Daten über die URL übergeben werden. Dies können wir nun nutzen, um zu sehen, ob nun tatsächlich Daten vom Formular via URL übertragen werden. Uebung5.doc

10 Formulare Aufgabe 7 Die Auswertungsseite Erzeugen Sie eine ganz einfache HTML - Seite, die folgendes Aussehen hat: Auswertungsseite Nennen Sie diese Seite auswertung.html. Tragen Sie nun (falls nicht schon geschehen) diese Seite als action - Parameter in die <form> - Tags ihrer Formulare ein. Außerdem überprüfen Sie, ob Sie überall method="get" als zweiten Parameter eingetragen haben. Nun sollten Sie beim Abschicken des ersten Formulars folgendes Ergebnis sehen: Formular und Ergebnis - Beachte die URL! Uebung5.doc

11 JavaScript die clientseitige Programmiersprache 5.2. JavaScript die clientseitige Programmiersprache JavaScript ist kein direkter Bestandteil von HTML, sonder eine Programmiersprache. Diese Sprache wurde jedoch eigens zu dem Zweck geschaffen, HTML - Autoren ein Werkzeug in die Hand zugeben, mit dessen Hilfe sich WWW - Seiten optimieren lassen. JavaScript - Programme werden wahlweise direkt in der HTML - Datei oder in separaten Dateien notiert. Sie werden nicht - wie Java-Programme - kompliliert, sondern als Queltext uzr Laufzeit interpretiert, also ähnlich wie Batch - Dateien in Dos. Dazu besitzen moderne Browser entsprechende Interpretersoftware. JavaScript ist eine Scriptsprache, die von Netscape eingeführt wurde und von Netscape lizensiert ist. Deshalb beherrschen die jeweils neuen Versionen des Netscape - Browsers auch immer etwas mehr JavaScript als die Konkurrenz, die nur abwarten kann, was Netscape an Neuigkeiten implementiert. Weiterhin unterscheiden sich Netscape und Internet Explorer in der Interpretation einzelner Objekteigenschaften. Dies ist für einen Programmierer sehr unschön, will er doch seine HTML - Seiten für alle Browser implementieren. Der Internetexplorer 4.x interpretiert zwar JavasScript, daneben aber auch die Microsoft - eigene Sprachvariante JScript, die spezielle Befehle für die Betriebssystemerweiterungen des Internet Explorers bereitstellen. Sowohl Netscape als auch Microsoft betonen, daß sie sich mit ihren Sprachinterpretern am Standart für Internet - Scriptsprachen, an ECMA-262, orientieren. Das ECMA - Kommittee, dem verschiedene Software - Hersteller, unter anderem Microsoft und Netscape, angehören, ist bemüht, auch im Bereich der Script - Sprachen einen allgemeingültigen Standard zu definieren, wie es bei HTML der Fall ist. Wichitg: JavaScript ist eine Interpretersprache. JavaScript wird vom Browser interpretiert. Jede Browserversion hat eine andere Implementierung des Interpretors. Dies wirft Probleme auf, wenn Webseiten erstellt werden sollen, die sich mit allen Browsern gleich verhalten sollen JavaScript - Bereiche in HTML definieren Für ein JavaScript - Programmabschnitt können Sie in HTML Bereiche definieren. Mit <script type="text/javascript"> leiten Sie einen Bereich für JavaScript innerhalb einer HTML - Datei ein. Dahinter (am besten in er nächsten Zeile) sollten Sie mit <!-- einen Kommentar einleiten. Dadurch erreichen Sie, daß ältere Browser, die JavaScript nicht kennen, den folgenden JavaScript - Code ignorieren. Uebung5.doc

12 JavaScript die clientseitige Programmiersprache Das "Hello World" in JavaScript Folgendes Beispiel gibt ein Meldungsfenster aus: <html> <head> <title>javascript Hello World</title> <script type="text/javascript"> <!-- alert("hello World!"); // --> </script> <head> <body> <h1>javascript Hello World</h1> <p> Beim laden der Webseite erscheint eine Messagbox </p> </body> </html> Bei dem fett markierten Teil handelt es sich um den JavaScript - Code. Genau genommen wurde nur ein Funktionsaufruf benutzt alert(meldungstext). Mit zwei Schrägstrichen in der Zeile (//) darunter wird ein JavaScript - Kommentar eingeleitet, der bis zum Ende der Zeile gilt. folgende Meldung erscheint: Anschließend erscheint die eigentliche Webseite: Meldung via JavaScript Die Webseite. Uebung5.doc

13 JavaScript die clientseitige Programmiersprache JavaScript wird auf dem Client ausgeführt, entsprechend eignet es sich um clientseitige Aktionen auszuführen. Die Anwendungsgebiete sind Vielfältig man kann unter anderem: Die Größe und die Postion des Browserfensters beeinflussen Eingaben eines Formulars beim Verlassen eines Feldes überprüfen Berechnungen durchführen Meldungen ausgeben HTML - Seiten zu Laufzeit erstellen Mouseover - Effekte erzeugen. Wir werden nun als ein Beispiel mit JavaScript den beliebten Mouseover - Effekt programmieren Mouseover mit JavaScript Ein Mouesover - Effekt wird dadurch erzeugt, daß JavaScript in einer Webseite dafür sorgt das eine Grafik durch eine andere Grafik ersetzt wird, sobald die Mause über der Grafik schwebt. Seite wenn die Maus nicht über der Grafik ist. Seite, wenn die Maus über der Grafik ist. Erreicht wird das einerseits über das definieren von Grafiken in JavaScript: Normal1 = new Image(); Normal1.src = "button1.gif"; /* erste Standard-Grafik */ Die erste Zeile definiert eine JavaScript Variable, die den Typ Image habe soll. In der Zweiten Zeile wird dieser Variablen eine Quelle für die Bilddaten zugewiesen. Uebung5.doc

14 JavaScript die clientseitige Programmiersprache Als nächstes wird eine Funktion in JavaScript definiert, die eine existierende Grafik durch eine andere ersetzt. Hierbei wird ausgenützt, daß alle Grafiken einer Webseite in einem Array window.document.images[] abgelegt sind. Der Funktion wird die Bildnummer und die in JavaScript vorher definierte Grafikvariable übergeben. function Bildwechsel(Bildnr,Bildobjekt) { window.document.images[bildnr].src = Bildobjekt.src; Das waren die Vorarbeiten. Nun Wird innerhalb des HTML- Body-Bereiches eine entsprechende Grafik, bzw. ein Link implementiert, der Diese Funktion benutzt: <a href="javascript2.html" onmouseover="bildwechsel(0,highlight1)" onmouseout="bildwechsel(0,normal1)"><img src="button1.gif" width="130" height="30" border="0"></a> Hier bei werden zwei Ereignisse verwendet. onmouseover ist ein Ereignis, daß eintritt, wenn die Maus über dem Link, also über der Grafik ist. Das andere Ereignis onmouseout ist aktiv in dem Moment, in dem die Maus die Grafik wieder verläßt. Die JavaSkript - Engine kennt also verschiedene Ereignisse, an die sich JavaScript - Funktionen binden lassen. Diese Funktionen werden dann genau beim Eintreten des Ereignisses ausgeführt. Der komplette Source - Code sieht wie folgt aus: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" " <html> <head> <title>javaskript 2</title> <script type="text/javascript"> <!-- Normal1 = new Image(); Normal1.src = "button1.gif"; /* erste Standard-Grafik */ Highlight1 = new Image(); Highlight1.src = "button1h.gif"; /* erste Highlight-Grafik */ function Bildwechsel(Bildnr,Bildobjekt) { window.document.images[bildnr].src = Bildobjekt.src; } //--> </script> </head> <body> <h1>javaskript Mouseover</h1> <a href="javascript2.html" onmouseover="bildwechsel(0,highlight1)" onmouseout="bildwechsel(0,normal1)"><img src="button1.gif" width="130" height="30" border="0"></a><br> </body> </html> Uebung5.doc

15 PHP - die Serverseitige Skriptsprache 5.3. PHP - die Serverseitige Skriptsprache Analog zu JavaScript - einer Skriptsprache auf der Clientseite, ist PHP eine Skriptsprache, die auf dem Webserver läuft. Speziell gekennzeichnete Webseiten werden vom Webserver nach dem PHP - Code durchsucht und bevor der Client die Webseite bekommt wird der PHP - Code vom Server interpretiert und erst das Ergebnis zum Client weitergeleitet. Durch diesen Mechanismus lassen sich lassen sich dynamische Webseiten erstellen, deren Inhalt genau zu dem Zeitpunkt erzeugt wird, zu dem der Client sie anfordert. Die Inhalte könnten dann beispielsweise aus einer Datenbank stammen. Wichtig ist hierbei noch, daß beim Client von dem PHP - Code (bei richtiger Programmierung) nichts mehr übrig bleibt. - Der Client bekommt reines HTML Hello World in PHP PHP - Code wird in HTML Dateien durch ein Spezielles Tag eingebettet. <?php...hier php code...?> PHP beginnt immer mit der Sequenz <?php und endet immer mit?>. Dazwischen befindet sich PHP Code. Wir wollen nun nur einen Befehl kennenlernen, um ein einfaches "Hello World" ausgeben zu können: print "Hello World!"; Diese Zeile sorgt bei den Webserver dafür, daß der Befehl print ausgeführt wird und die Zeichenkette "Hello World!" ausgegeben wird. Die entsprechende PHP - Datei lautet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>php Hello Worldr</title> </head> <body> <h1>php Hello World</h1> <?php?> print "Hello World!"; </body> </html> Ausgabe - reines HTML! Uebung5.doc

16 PHP - die Serverseitige Skriptsprache Formular mit Auswertung in PHP Um ein Formular und dessen Auswertung in ein und der selben Datei unter zu bringen, kann man folgende Lösung implementieren: Der gesamte <body> - Bereich wird über PHP - print - Befehle ausgegeben. Zuerst wird aber eine Fallunterscheidung vorgenommen: if (!$name) {..Formular ausgeben via PHP } else {.. Formular auswerten via PHP } Der Ausdruck (!$name) überprüft, ob die Variable $name noch nicht definiert ist. Ist diese Variable tatsächlich noch nicht definiert, so wurde offensichtlich das Formular noch nicht ausgegeben. Also wird der obere Pfad der if-anweisung durchlaufen und die Formularausgabe erfolgt: Ausgabe des Formulars Füllt der Anwender nun das Formular aus, so wird eine Variable $name erzeugt und mit dem gefüllt, was der Anwender in das Eingabefeld eingetragen hat. Das Formular hat als action - Parameter wieder die Seiten selbst. angegeben (action='php_form.php3') also wird beim Drücken des Absenden - Buttons wieder die diese Seite aufgerufen. Wieder findet der Test statt, ob es die Variable $name noch nicht gibt (if (!$name)...). Jetzt ist die Variable aber vorhanden und mit Daten gefüllt, also wird der else- Pfad der if-anweisung durchlaufen und die Auswertung des Formulars erfolgt: Auswertung des Formulars Uebung5.doc

17 PHP - die Serverseitige Skriptsprache Außer dem print - Befehl wurde nur die Fallunterscheidung mit folgender Syntax verwendet: if (Bedingung) { Anweisungen } else { Anweisungen } Eine vollständige Dokumentation zu PHP finden interessierte Leser unter Hier der komplette Code zur PHP - Formular - Datei: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>php und Formular</title> </head> <body> <h1> Formulare mit PHP </h1> <?php if (!$name) { print "<form name='testform' action='php_form.php3' method='post'><br>\n"; print "Bitte Namen eingeben :<br>\n"; print " <input "; print " value='vorgabewert'"; print " name='name' type='text' size='30' maxlength='30'><br>\n"; print "<input type='submit' value=' Absenden '><br>\n"; print "<input type='reset' value=' Abbrechen'><br>\n"; print "</form>\n"; } else { print "Hier kommt das hin was ausgeben werden soll, wenn das Formular ausgefuellt ist...\n"; print "<br>"; print "Folgendes wurde eingegeben:[ $name ]"; print"<br>\n"; }?> <br> <a href="php_form.php3"> Formular neu Laden </a><br> <a href="php_form.src"> Quellcode </a> </body> </html> Uebung5.doc