HTML Formulare Benutzerschnittstelle für interaktive

Сomentários

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&ouml;glichkeit<br>
<input type="checkbox" name="AUSWAHL2" value="2">
zweite Auswahlm&ouml;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&ouml;glichkeit in den Radiobuttons auswählen:
<br>
<input type="radio" name="AUSWAHL" value="a">
erste Auswahlm&ouml;glichkeit<br>
<input type="radio" name="AUSWAHL" value="b"
checked="checked">
zweite Auswahlm&ouml;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

Documentos relacionados