html-workshop: formulare 1 html formulare hani sahyoun rz uni hohenheim
TRANSCRIPT
HTML-Workshop: Formulare 1
HTML Formulare
Hani SahyounRZ Uni Hohenheim
HTML-Workshop: Formulare 2
HTML-FormulareErlä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<FORM NAME="Formname" METHOD="GET | POST"
ACTION="URL | mailto:name@mailserver" Enctype="UrlEncoded | Text/Plain">
<Input Name="NAME" Type="Typ" Size="Grösse">
Weitere Anweisungen können hier folgen
<Input Type="Submit" Value="Senden">
<Input Type="Reset" Value="Löschen">
</FORM>
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
HTML-Workshop: Formulare 5
Formulardaten als Mail verschicken
<FORM METHOD="POST" ACTION="mailto:name@host?subject=Thema" ENCTYPE="Text/Plain">
Definition der Formularfelder
</FORM>
Formulardaten werden als Wertepaare: Name=Wert
an die angegebene Emailadresse 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
<Input Type="..." Name="..." Size="..." Value="...">
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-FeldType = "...." 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-FeldType = "...." 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 markierenSubmit: Formulardaten abschicken
Reset: Formularfelder löschen
HTML-Workshop: Formulare 10
Attribute von einzeiligen Textfeldern
<Input Type="Text"
Name = "Bezeichnung"
Size = "Breite des Textfeldes" Anzahl der Zeichen
Maxlength = "Maximal zulässige Größe"
Value = "Text" (Vorbelegung durch einen Text)>
Beispiel:
<Input Name="Adresse" Size="40" Maxlength="80">
HTML-Workshop: Formulare 11
Attribute von einzeiligen Textfeldern
Schriftart im Eingabefeld definieren, Syntax
<input type="text" name="Feldname" style="font-family: Schriftart; font-size: Schriftgröße in pt;font-style: normal|italic; font-weight: normal|bold;">
HTML-Workshop: Formulare 12
Attribute von einzeiligen Textfeldern
Schriftart im Eingabefeld definieren, Beispiel
<input type="text" name="Passwort" size="10" maxlength="8" style="font-family: Comic Sans MS; font-size: 20pt; font-style: normal; font-weight: bold;">
HTML-Workshop: Formulare 13
Mehrzeilige Eingabefelder<TEXTAREA NAME="NAME"
ROWS="xx" COLS="yy"Wrap="off|virtual|physical" >
</TEXTAREA>
Beispiel:
Kommentar: <TEXTAREA NAME="Kommentar" ROWS="6" COLS="40" Wrap="Physical">
</TEXTAREA>
HTML-Workshop: Formulare 14
Mehrzeilige EingabefelderDie 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
<SELECT NAME="NAME"><OPTION> 1.Option
<OPTION> 2. Option..............
<OPTION> n.Option
</SELECT>
HTML-Workshop: Formulare 16
Attribute der Select-Anweisung
<SELECT NAME="NAME" SIZE=".."
Multiple>
SIZE=".." Anzahl der Zeilen im Auswahlfenster
Multiple: Auswahl von mehreren Optionen Erlaubt
HTML-Workshop: Formulare 17
Auswahl aus vorgegebenen Optionen
Beispiel:<SELECT NAME="Zahlungsart">
<OPTION SELECTED> Euroscheck
<OPTION> Kreditkarte
<OPTION> Banküberweisung
</SELECT>
HTML-Workshop: Formulare 18
Schlatflächen abschicken/Felder löschen
<input type="Submit" value="Text"><input type="Reset" value="Text">
Beispiel:<input type="Submit" value="Bestellung
abschicken"><input type="Reset" value="Felder löschen">
HTML-Workshop: Formulare 19
Schlatflächen abschicken/Felder löschen
Mit den Anweisungen<input type="Submit" value="Text"><input type="Reset" value="Text">Erzeugt man "Schalter" im Formular, welcheeine 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 Email 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-SkripteSyntax des Formulars:<form method="post"
action="send_form.php"> Hier folgen die Formularfelder</form> <!--Formularende--> 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[Email]; // Absenderadresse aus dem Formular $text = ""; // Inhalt der Nachricht initialisieren $mailto = "[email protected]"; //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. } ?>
HTML-Workshop: Formulare 23
Weitere Infos zu php
Sie finden weitere Dokumente und Programmbeispiele zu php in den Kursunterlagen des Rechenzentrums unter der URLhttp://mysql.rz.uni-hohenheim.de/php/
HTML-Workshop: Formulare 24
HTML-Formulare: CGIInteraktion FormularCGI-Skript
HTML-Workshop: Formulare 25
HTML-Formulare: CGICommon 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: CGICommon 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: CGIEinige 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"
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& ...
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: CGIEinlesen der Formulardaten
#!/usr/bin/perl# Formulardaten $Eingabeif ($ENV{'REQUEST_METHOD'} eq "GET")
{$Eingabe = $ENV{'QUERY_STRING'};elsif ($ENV{'REQUEST_METHOD'} eq "POST") { read (STDIN,$Eingabe,$ENV{'CONTENT_LENGTH'});}