HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.
-
Upload
britta-hertz -
Category
Documents
-
view
222 -
download
0
Transcript of HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.
![Page 1: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/1.jpg)
HTML-Workshop: Formulare 1
HTML Formulare
Hani SahyounRZ Uni Hohenheim
![Page 2: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/2.jpg)
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"
![Page 3: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/3.jpg)
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>
![Page 4: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/4.jpg)
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
![Page 5: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/5.jpg)
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.
![Page 6: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/6.jpg)
HTML-Workshop: Formulare 6
Feldtypen
Input: i.a. Einzeiliges Eingabefeld
Textarea: Mehrzelliges Eingabefeld
Select: Auswahl aus vorgegebenen
Optionen
![Page 7: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/7.jpg)
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
![Page 8: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/8.jpg)
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.
![Page 9: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/9.jpg)
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
![Page 10: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/10.jpg)
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">
![Page 11: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/11.jpg)
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;">
![Page 12: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/12.jpg)
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;">
![Page 13: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/13.jpg)
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>
![Page 14: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/14.jpg)
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
![Page 15: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/15.jpg)
HTML-Workshop: Formulare 15
Auswahl aus vorgegebenen Optionen
<SELECT NAME="NAME"><OPTION> 1.Option
<OPTION> 2. Option..............
<OPTION> n.Option
</SELECT>
![Page 16: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/16.jpg)
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
![Page 17: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/17.jpg)
HTML-Workshop: Formulare 17
Auswahl aus vorgegebenen Optionen
Beispiel:<SELECT NAME="Zahlungsart">
<OPTION SELECTED> Euroscheck
<OPTION> Kreditkarte
<OPTION> Banküberweisung
</SELECT>
![Page 18: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/18.jpg)
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">
![Page 19: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/19.jpg)
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).
![Page 20: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/20.jpg)
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.
![Page 21: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/21.jpg)
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.
![Page 22: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/22.jpg)
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. } ?>
![Page 23: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/23.jpg)
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/
![Page 24: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/24.jpg)
HTML-Workshop: Formulare 24
HTML-Formulare: CGIInteraktion FormularCGI-Skript
![Page 25: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/25.jpg)
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
![Page 26: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/26.jpg)
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.
![Page 27: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/27.jpg)
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"
![Page 28: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/28.jpg)
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& ...
![Page 29: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/29.jpg)
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'};
![Page 30: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/30.jpg)
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)
![Page 31: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/31.jpg)
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'});
![Page 32: HTML-Workshop: Formulare 1 HTML Formulare Hani Sahyoun RZ Uni Hohenheim.](https://reader036.fdocuments.net/reader036/viewer/2022062521/570491c61a28ab14218dae77/html5/thumbnails/32.jpg)
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'});}