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

HTML-Workshop: Formulare 1

HTML Formulare

Hani SahyounRZ Uni Hohenheim


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"


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>


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


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.


Feldtypen

Input: i.a. Einzeiliges Eingabefeld

Textarea: Mehrzelliges Eingabefeld

Select: Auswahl aus vorgegebenen

Optionen


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


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.


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


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



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;">



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;">


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>


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


Auswahl aus vorgegebenen Optionen

<SELECT NAME="NAME"><OPTION> 1.Option

<OPTION> 2. Option..............

<OPTION> n.Option

</SELECT>


Attribute der Select-Anweisung

<SELECT NAME="NAME" SIZE=".."

Multiple>

SIZE=".." Anzahl der Zeilen im Auswahlfenster

Multiple: Auswahl von mehreren Optionen Erlaubt


Auswahl aus vorgegebenen Optionen

Beispiel:<SELECT NAME="Zahlungsart">

<OPTION SELECTED> Euroscheck

<OPTION> Kreditkarte

<OPTION> Banküberweisung

</SELECT>


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


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


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.


Formulare und php-SkripteSyntax des Formulars:<form method="post"

action="send_form.php"> Hier folgen die Formularfelder</form>  Hinweis: send_form.php ist der Name des

php-Skripts, das beim Senden des Formulars gestartet wird.


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. } ?>


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-Formulare: CGIInteraktion FormularCGI-Skript


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


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



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



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)



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

Documents

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