cgicorner.ch ¦ CGI-Hilfe ¦ Tutorial ¦ Kapitel 8: HTML-Formulare

Tutorial - Kapitel 8: HTML-Formulare

Voraussetzungen für dieses Kapitel

Webserver mit Perl/CGI-Unterstützung

Einleitung

Bis anhin programmierten wir zwar dynamisch erstellte Seiten, Besucher unserer Webseiten konnten aber überhaupt keinen Einfluss nehmen. In diesem Kapitel beschäftigen wir uns mit HTML-Formularen und der Weitergabe dieser Daten an ein CGI-Script.

Teil 1: Das HTML-Formular

In einem ersten Schritt müssen wir das HTML-Formular erstellen. Detaillierte Informationen über HTML-Formulare findet man auf den Seiten von SelfHTML. Ich befasse mich hier nur mit dem Grundlegendsten.

Erstellen wir einmal eine HTML-Seite (htmlforms.htm im HTML-Verzeichnis) und nehmen diese dann genauer unter die Lupe:

<html>
  <body>
    <h1>HTML-Formular zum testen</H1>
    <form action="/cgi-bin/htmlforms.cgi" method="post">
      Ihr Vorname <input type=text name="vorname"/><br/>
      Irgendein Kommentar: <textarea name="kommentar"></textarea><br/>
      Kurzer Text: <input type=text name="kurztext"/><br/>
      <input type=submit value="Formular abschicken"/>
    </form>
  </body>
</html>

Optisch ist das Formular eine Katastrophe, aber für unsere Zwecke reicht es völlig...

Die erste interessante Zeile ist der FORM-Tag. Hier haben wir zwei Attribute: "action" und "method", welche einmal genauer betrachtet werden sollten: "action" legt fest, wohin die Datei übermittelt werden sollen. In unserem Fall wäre das ein CGI-Script unter /cgi-bin/htmlforms.cgi, welches wir in Teil 2 dann erstellen werden. "method" definiert die Art, wie das Formular verschickt werden soll. Dabei gibt es "get" (via URL, z.B. /cgi-bin/htmlforms.cgi?feld1=wert1&feld2=wert2 / Länge beschränkt) und "post" (via STDIN). Bei Formularen empfiehlt sich grundsätzlich immer "post".

Danach kommen die Eingabefelder. Diese werden mit <input type=text name="xyz"/> erstellt. Mit dem Namen "xyz" können wir später im CGI-Script dann auf diesen Wert zurückgreifen. Versteckte Eingabefelder haben übrigens folgenden Syntax: <input type="hidden" name="xyz" value="abc"/>. type="password" definiert ein Passwort-Feld (also nur * sichtbar). <textarea name="xyz"></textarea> definiert ein mehrzeiliges Eingabefeld.

Zuletzt haben wir noch den Submit-Button. Hier handelt es sich wieder um ein Input-Feld, allerdings vom Typ "submit". Die Beschriftung dieses Buttons wird durch das Attribut "value" festgelegt. Ein Klick auf diesen Button schickt die Daten an das unter "action" (im <form>) definierte Script.

Teil 2: HTML-Formular im Script verarbeiten

Nun kommt der interessante Teil: die Auswertung der Daten im CGI-Script. Ich habe schon vor einiger Zeit einmal eine Subroutine geschrieben, welche die Daten, egal ob via "get" oder "post" übermittelt, auswertet und in einen Hash %FORM abspeichert. Diese sieht wie folgt aus:

sub readForm {					# Parameter in %FORM einlesen
  my ($buffer,@pairs,@pair,$i);
  if ($ENV{'REQUEST_METHOD'} eq "GET") {
    $buffer = $ENV{'QUERY_STRING'};
  } else {
    read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
  }
  @pairs = split(/&/, $buffer);
  foreach (@pairs) {
    @pair = split(/=/, $_, 2);
    for ($i=0;$i<2;$i++) {
      $pair[$i] =~ tr/+/ /;
      $pair[$i] =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
    }
    $FORM{$pair[0]} = $pair[1];
  }
}

Auf diese Funktion möchte ich nur am Rande eingehen. Zuerst wird anhand der Umgebungsvariable $ENV{"REQUEST_METHOD"} geprüft, ob das Formular via "get" oder "post" übermittelt wurde. Je nach Methode werden die Daten unterschiedlich in die Variable $buffer eingelesen. Diese sind dann nach dem Syntax "feld1=wert1&feld2=wert2&feld3=wert3" abgelegt. In einem nächsten Schritt werden die Daten beim & getrennt und in ein Array @pairs geschrieben. Danach wird mit einer foreach-Schleife jedes Paar nochmals beim = getrennt, Sonderzeichen dekodiert (z.B. %20 --> Leerzeichen, Hexadezimaler ASCII-Code) und dann in den Hash geschrieben.

Nun erstellen wir mal eine Datei htmlforms.cgi im cgi-bin-Verzeichnis mit folgendem Inhalt:

#!/usr/bin/perl
print "Content-type: text/html\n\n";
print "<html><body>";
my %FORM;
&readForm;

print "Hallo $FORM{vorname}<p>";
print "Du hast folgenden Kommentar verfasst: $FORM{kommentar}<p>";
print "Zudem hast du noch folgenden kurzen Text geschrieben, der an dieser Stelle 10 Mal ausgegeben wird:<br>";
$FORM{kurztext}.="<br>";
$FORM{kurztext}=$FORM{kurztext} x 10;
print "$FORM{kurztext}";
print "</body></html>";

sub readForm {					# Parameter in %FORM einlesen
  my ($buffer,@pairs,@pair,$i);
  if ($ENV{'REQUEST_METHOD'} eq "GET") {
    $buffer = $ENV{'QUERY_STRING'};
  } else {
    read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
  }
  @pairs = split(/&/, $buffer);
  foreach (@pairs) {
    @pair = split(/=/, $_, 2);
    for ($i=0;$i<2;$i++) {
      $pair[$i] =~ tr/+/ /;
      $pair[$i] =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
    }
    $FORM{$pair[0]} = $pair[1];
  }
}

Sieht doch gar nicht mal so kompliziert aus, oder? Aber nun noch schön der Reihe nach: Zuerst deklarieren wir den Hash %FORM und führen - die uns bereits bekannte Subroutine - &readForm aus.

Danach können wir einzelne Formularfelder immer mit $FORM{"feldname"} ansprechen. Diese Variablen lassen sich natürlich auch verändern oder mit if-Abfragen auswerten.

Zusammenfassung

In diesem Kapitel haben wir zum ersten Mal ein Formular an ein CGI-Script übermittelt. Wir kennen den Syntax eines HTML-Formulars und wissen, dass wir bei SelfHTML mehr Informationen dazu finden würden. Ebenfalls wissen wir, dass es zwei Methoden gibt, ein Formular zu verschicken. Auf der CGI-Seite kennen wir die Funktion &readForm, welche die Formulardaten in einen Hash einliest.

Wie geht's weiter?

Im Kapitel 9 befassen wir uns mit Dateien, welche wir für die Ein- und Ausgabe benutzen werden.

Im vorherigen Kapitel (7) beschäftigten wir uns Subroutinen.

Sie können aber auch zurück zum Inhaltsverzeichnis und dort ein beliebiges anderes Kapitel auswählen.

Diese Seite ist ein Teil von http://www.cgicorner.ch

URL dieser Seite: http://www.cgicorner.ch/tutor/08_forms.shtml
Letzte Änderung: 27. August 2007