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

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"

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

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: 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

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

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

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

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.

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

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

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

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

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

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

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

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

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

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

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).

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

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.

HTML-Workshop: Formulare 22 Das php-Skript send_form.php <?php $from = $_POST[ ]; // Absenderadresse aus dem Formular $text = ""; // Inhalt der Nachricht initialisieren $mailto = //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 ."); } else { echo "Vielen Dank für Ihre Bestellung. Sie werden von der Qualität unserer Pizzas begeistert sein."; //Rückmeldung wenn erfolgreich abgeschickt wurde. } ?>

HTML-Workshop: Formulare 23 Weitere Infos zu php  Sie finden weitere Dokumente und Programmbeispiele zu php in den Kursunterlagen des Rechenzentrums unter der URL

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

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

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.

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 = QUERY_STRING : enthält Formulardaten bei METHOD = "GET"

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: cgi?Feldname1=Wert&Feldname2=Wert&...

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'};

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)

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'});

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'}); }