HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.

Präsentation zum Thema: "HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim."—  Präsentation transkript:

1 HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim

2 HTML-Workshop: Formulare 2 HTML-Formulare Erläuterung der Schreibkonventionen: Kursiv gedruckte Worte sind Platzhalter, die durch einen aktuellen Wert ersetzt werden müssen. Wenn mehrere Optionen zur Auswahl stehen, dann werden diese durch einen senkrechten Strich getrennt. Nur eine der Optionen darf verwendet werden: Beispiel: Method = "GET | POST"

3 HTML-Workshop: Formulare 3 Syntax Weitere Anweisungen können hier folgen

4 HTML-Workshop: Formulare 4 Attribute  Method = "GET | POST" Definiert die Art der Datenübergabe an das CGI-Programm, das die Daten bearbeitet.  ACTION = "URL | mailto: Name@Host" URL: Pfadname eines Programms im Verzeichnis /CGI-BIN/ auf dem Server für die Bearbeitung der Formulardaten  Enctype="UrlEncoded | Text/Plain"> Definiert die Art, wie die Formulardaten codiert werden

5 HTML-Workshop: Formulare 5 Formulardaten als Mail verschicken Definition der Formularfelder Formulardaten werden als Wertepaare: Name=Wert an die angegebene Emailadresse verschickt.

6 HTML-Workshop: Formulare 6 Feldtypen  Input:i.a. Einzeiliges Eingabefeld  Textarea: Mehrzelliges Eingabefeld  Select:Auswahl aus vorgegebenen Optionen

7 HTML-Workshop: Formulare 7 Input-Feld  Input:Feldattribute Type:Feldtyp Name:Feldname, Eingabe zwingend Size:Breite des Eingabefeldes. Defaultwert=30 Value:Falls erwünscht, kann das Feld mit einem Wert vorbelegt werden

8 HTML-Workshop: Formulare 8 Input-Feld Type = "...." Folgende Typen sind möglich Text:Einzeiliger Text Password:Eingabe wird nicht angezeigt Checkbox:Auswahl einer oder mehreren Optionen  Checkboxen sind eine Gruppe von Auswahlkästchen, aus der der Anwender eins oder mehrere markieren ("ankreuzen") kann.  Die Werte von markierten Checkboxen werden beim Absenden des Formular mit übertragen.

9 HTML-Workshop: Formulare 9 Input-Feld Type = "...." Folgende Typen sind möglich Radio:Auswahl einer Option aus mehreren  Alle Radiobuttons, die den gleichen Namen haben, gehören zu einer Gruppe  von diesen Buttons kann der Anwender nur einen markieren Submit:Formulardaten abschicken Reset:Formularfelder löschen

10 HTML-Workshop: Formulare 10 Attribute von einzeiligen Textfeldern Beispiel:

11 HTML-Workshop: Formulare 11 Attribute von einzeiligen Textfeldern Schriftart im Eingabefeld definieren, Syntax

12 HTML-Workshop: Formulare 12 Attribute von einzeiligen Textfeldern Schriftart im Eingabefeld definieren, Beispiel

13 HTML-Workshop: Formulare 13 Mehrzeilige Eingabefelder Beispiel: Kommentar:

14 HTML-Workshop: Formulare 14 Mehrzeilige Eingabefelder Die Option WRAP in der Anweisung TEXTAREA: wrap="virtual" Text wird umgebrochen, aber Umbruch nicht übertragen wrap="physical" (empfohlen) Text wird umgebrochen und Umbruch mit übertragen wrap="off" (Voreinstellung) Kein Umbruch in Eingabezeile

15 HTML-Workshop: Formulare 15 Auswahl aus vorgegebenen Optionen 1.Option 2. Option.............. n.Option

16 HTML-Workshop: Formulare 16 Attribute der Select-Anweisung <SELECT NAME="NAME" SIZE=".." Multiple> m SIZE=".." Anzahl der Zeilen im Auswahlfenster m Multiple: Auswahl von mehreren Optionen Erlaubt

17 HTML-Workshop: Formulare 17 Auswahl aus vorgegebenen Optionen Beispiel: Euroscheck Kreditkarte Banküberweisung

18 HTML-Workshop: Formulare 18 Schlatflächen abschicken/Felder löschen Beispiel:

19 HTML-Workshop: Formulare 19 Schlatflächen abschicken/Felder löschen Mit den Anweisungen Erzeugt man "Schalter" im Formular, welche eine vordefinierte Aktion auslösen:  Formulardaten senden (Submit),  Formularfelder auf den ursprünglichen Zustand zurücksetzen (reset).

20 HTML-Workshop: Formulare 20 Formulare und php-Skripte  Mit der Skriptsprache php kann man Formularinhalte weiter verarbeiten oder als Email weitersenden.  Vorteil: php verwendet das Mailprogramm des Servers. Funktioniert, auch wenn man keine Mail aus dem Browser schicken kann.

21 HTML-Workshop: Formulare 21 Formulare und php-Skripte Syntax des Formulars: Hier folgen die Formularfelder Hinweis: send_form.php ist der Name des php-Skripts, das beim Senden des Formulars gestartet wird.

22 HTML-Workshop: Formulare 22 Das php-Skript send_form.php <?php $from = $_POST[Email]; // Absenderadresse aus dem Formular $text = ""; // Inhalt der Nachricht initialisieren $mailto = "name@uni-hohenheim.de"; //Adresse Empfänger $subject = "Thema der Nachricht"; // Subjectfeld der Mail foreach ($HTTP_POST_VARS as $key=>$Feld) { $text = $text."$key: $Feld\n"; /*Feldname: Feldwert, neue Zeile an $text anhängen*/ } if (!mail($mailto, $subject, $text, "From:$from")) //Mail abschicken mit Fehlerprüfung { echo ("Es gibt Probleme mit dem Absenden der Email."); } else { echo "Vielen Dank für Ihre Bestellung. Sie werden von der Qualität unserer Pizzas begeistert sein."; //Rückmeldung wenn Email erfolgreich abgeschickt wurde. } ?>

23 HTML-Workshop: Formulare 23 Weitere Infos zu php  Sie finden weitere Dokumente und Programmbeispiele zu php in den Kursunterlagen des Rechenzentrums unter der URL http://mysql.rz.uni-hohenheim.de/php/

24 HTML-Workshop: Formulare 24 HTML-Formulare: CGI Interaktion Formular  CGI-Skript

25 HTML-Workshop: Formulare 25 HTML-Formulare: CGI Common Gateway Interface (CGI): Mechanismus zur Kommunikation zwischen WEB-Server und Programmen In CGI werden Variablen definiert als Schnittstelle zur Übergabe von Daten zwischen Server und Programmen

26 HTML-Workshop: Formulare 26 HTML-Formulare: CGI Common Gateway Interface (CGI): Diese Variablen werden benutzt, um u.a. Formulardaten an ein Programm zu übergeben und verarbeiten zu lassen Als Programmiersprachen für CGI- Programme werden meist c und PERL eingesetzt.

27 HTML-Workshop: Formulare 27 HTML-Formulare: CGI Einige CGI-Variablen: REMOTE_ADDR = Adresse des Clients REQUEST_METHOD = GET | POST HTTP_USER_AGENT = Name und Version des Browsers. Z.B. Mozilla/4.03 [en] (WinNT; I) SERVER_NAME = www.uni-hohenheim.de QUERY_STRING : enthält Formulardaten bei METHOD = "GET"

28 HTML-Workshop: Formulare 28 Parameterübergabe an CGI-Skripte 2 Übergabemethoden sind bekannt: 1. GET: Eingabeparameter werden nach dem Fragezeichen an die Basis-URL (Dateiadresse) angehängt: Beispiel: http://www.uni-hohenheim.de/cgi-bin/test- cgi?Feldname1=Wert&Feldname2=Wert&...

29 HTML-Workshop: Formulare 29 Parameterübergabe an CGI-Skripte 1. GET: (Fortsetzung) Die Variable 'QUERY_STRING' enthält die übergebenen Parameter Einlesen von Formulareingaben in einem Perl- Skript bei der Methode GET: $Eingabe = $ENV{'QUERY_STRING'};

30 HTML-Workshop: Formulare 30 Parameterübergabe an CGI-Skripte 1. Post (wird bevorzugt) Die Formulareingaben werden wie folgt übergeben: Feldname1=Wert1& Feldname2=Wert2&..... Die Parameterpaare werden über die Variable STDIN übergeben (STDIN = STandard Input)

31 HTML-Workshop: Formulare 31 Parameterübergabe an CGI-Skripte 1. Post (Fortsetzung) Die Variable 'CONTENT_LENGTH' enthält die Zahl der Zeichen, die in STDIN übergeben werden Einlesen von Formulareingaben in einem Perl- Skript: read ( STDIN, $Eingabe,$ENV{'CONTENT_LENGTH'});

32 HTML-Workshop: Formulare 32 HTML-Formulare: CGI Einlesen der Formulardaten #!/usr/bin/perl # Formulardaten  $Eingabe if ($ENV{'REQUEST_METHOD'} eq "GET") {$Eingabe = $ENV{'QUERY_STRING'}; elsif ($ENV{'REQUEST_METHOD'} eq "POST") { read (STDIN,$Eingabe,$ENV{'CONTENT_LENGTH'}); }