HTML Formulare Benutzerschnittstelle für interaktive
Transcrição
HTML Formulare Benutzerschnittstelle für interaktive
1 HTML Formulare Benutzerschnittstelle für interaktive Webseiten 2 Literatur und Links Literatur: Coar, Ken; Bowen, Rich: Apache-Kochbuch. 2004 HTML: kein Buch oder irgend eins für Einsteiger, z. B. Münz, Stefan; Nefzger, Wolfgang: HTML 4.0 Handbuch. HTML, JavaScript, DHTML, Perl. 1999 Links: Apache: http://httpd.apache.org/docs/2.2/de/ XAMP: http://www.apachefriends.org/de/xampp.html HTML: http://de.selfhtml.org/ Notepad++: http://notepad-plus-plus.org/download/v6.1.8.html PHP: http://www.selfphp.de/ Python: http://www.python.org/ BSCW: http://www.bscw.de/unternehmen.html Eclipse: http://www.eclipse.org/downloads/ CSS http://www.css4you.de/ PHP http://www.selfphp.de/ CSS Smartphone http://aktuell.de.selfhtml.org/artikel/css/mobile-endgeraete/ http://www.zuellich.de/tutorials/css-fuer-smartphones Notepad++: http://notepad-plus-plus.org/download/v6.1.8.html Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik Wie gestalte ich Interaktive Webseiten? 3 Grundsätzliches Vorgehen Erstellung einer Interaktiven Webanwendung mit PHP: 1.) Erzeugen einer HTML-Seite (z.B. formular.html) mit einem Formular und einem Aufruf eines Antwortscriptes (z.B. antwort.php). 2.) Erzeugen eines Antwortscriptes (z.B. mit PHP wie antwort.php) 3.) Testen. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik Wie funktioniert eine interaktive Internetseite grundsätzlich 1. Aufruf eines HTML-Formulars(*) 2. Ausfüllen HTML-Formulars(*) 4 Ihre Eingabe: huba buba Browser Absenden 3. Abschicken des HTML-Formulars: mit HTTP POST oder HTTP GET werden Daten an Webserver übertragen.(*) 4. Programm / Script bearbeitet Daten und erzeugt als Ausgabe HTML-Code 5. Ausgabe wird an Browser zurück übertragen und angezeigt. antwort.php Server Ihre Eingabe: huba buba Ergebnis: schubi dubi Browser (*) Alternativ kann ein Programm / Script mit HTTP GET auch ohne Formular in der Browsereingabezeile aufgerufen werden. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik Wie sieht ein einfaches Formular in HTML aus? 5 Ein einfaches HTML-Formular (ohne HTML-Rahmen <html><head>…..) <form method="get" action="antwort.php" enctype="multipart/form-data"> Text in Zeile eingeben: <br> <input type="text" name="TEXT" size="30"> <br> <input type="submit" name="L" value="Absenden"> </form> Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik Wie sieht ein einfaches PHP-Script aus? 6 Ein einfaches Script zur Illustration. Zur PHP-Programierung gibt es einen eigenen Foliensatz. Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik 7 Wie ist eine „form“ aufgebaut? Formulare allgemein Hier: Methode GET, es gibt auch noch POST, HEAD…. <form method="get" action="antwort.php" > ….. Verschiedene Eingabefelder, Führungstexte etc …… </form> Auswertungsscript, Heißt so, wie Sie es genannt haben Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik Wie werden in HTML Texteingabefelder dargestellt? 8 Formulare Textfelder <!-- eine Möglichkeit mit einem Textfeld--> <form method="get" action="antwort2.php"> Text in Textbereich eingeben: <br> <textarea name="TEXT" cols=45 rows=5/></textarea> <br> <input type="submit" name="L" value="Absenden"> </form> <!-- einzeiliges Eingabefeld--> <form method="get" action="antwort2.php"> Text in Zeile eingeben: <br> <input type="text" name="TEXT" size="30"> <br> <input type="submit" name="L" value="Absenden"> </form> Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik 9 Wie wird ein einzeiliges Textfeld codiert? <form method="get" action="antwort.php" enctype="multipart/form-data"> Text in Zeile eingeben: <br> <input type="text" name="TEXT" size="30"> <br> <input type="submit" name="L" value="Absenden"> </form> Das Script antwort.php muss sich im gleichen Verzeichnis auf dem Webserver befinden wie das Formular. Sonst voll qualifizieren. http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=referenzen Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik Wie sieht die Ausgabe von antwort.php aus? 10 Aufruf mit einzeiligem Textfeld im Formular oder direkt in der Browserzeile, z.B. http://claus-brell.de/.../.../.../antwort.php?TEXT=bla+bla+bla Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik Wie wird ein mehrzeiliges Textfeld codiert? 11 <textarea name="TEXT" cols=45 rows=5/></textarea> <input type="submit" name="L" value="Absenden"> Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik Wie können „Anhakkästchen“ dargestellt werden? 12 Formulare Checkboxen („multiple choice Mehrfachauswahl“) <form method="get" action="antwort2.php" > Eine oder mehrere Möglichkeiten in den Checkboxen auswählen: <br> <input type="checkbox" name="AUSWAHL1" value="1"> erste Auswahlmöglichkeit<br> <input type="checkbox" name="AUSWAHL2" value="2"> zweite Auswahlmöglichkeit<br> <br> <input type="submit" name="L" value="Absenden"> </form> Vorbelegung einer Checkbox mit: checked=„checked“. „AUSWAHL1“ wird als Variablenname übertragen. Variablennamen müssen unterschiedlich sein. http://wiki.selfhtml.org/wiki/HTML/Formulare/Checkboxen Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik Wie können Auswahlknöpfe (Einfachauswahl) dargestellt werden? 13 Formulare Radiobutons („multiple choice Einfachfachauswahl“) <form method="get" action="antwort2.php" > Genau eine Möglichkeit in den Radiobuttons auswählen: <br> <input type="radio" name="AUSWAHL" value="a"> erste Auswahlmöglichkeit<br> <input type="radio" name="AUSWAHL" value="b" checked="checked"> zweite Auswahlmöglichkeit<br> <br> <input type="submit" name="L" value="Absenden"> </form> Variablenname muss gleich sein. Beispiele unter http://claus-brell.de/................../..../formulartest2.htm http://wiki.selfhtml.org/wiki/HTML/Formulare/Radio-Buttons Prof. Dr. rer. nat. Claus Brell, http://claus-brell.de, [email protected], Wirtschaftsinformatik, Statistik