Formulare und dynamische Web-Seiten (CGI, PHP, Java, Javascript und ActiveX)
(HTML-Kurs, 9)
- Diese Seite wird nicht mehr aktualisiert -

Grundsätzliches

• Interaktiv, Kommunikation.
• Einsatzmöglichkeiten in Bibliotheken u.a.:
  • Katalog-Abfrage
  • Elektronischer Briefkasten
  • Anschaffungsvorschlag
  • Bestellformular
  • Suchformulare
  • Newsletter abonnieren!
  • Fragebogen
  • "Individualisierter" Fahrplan
• Durch <FORM> ... </FORM> wird ein bestimmter Bereich innerhalb einer normalen HTML-Seite als Formular definiert.
• Im einleitenden <FORM>-Tag wird die Übertragungsmethode festgelegt.
• "Innerhalb des Formulars werden verschiedene Eingabeelemente untergebracht und mit eindeutigen Namen versehen. Beim Abschicken eines ausgefüllten Formulars werden [...] alle Daten in Feldname/Feldinhalt-Paaren übermittelt." (Ramm, S. 231)

Datenübertragung per E-Mail

• Im einleitenden <FORM>-Tag gibt man mit ACTION="..." an, was mit den ausgefüllten Formulardaten passieren soll, wenn das Formular abgeschickt wird.
• Im einfachsten Fall geschieht die Übertragung durch die Mail-Funktion des Browsers. Dazu gibt man eine E-Mail-Adresse mit vorangestelltem MAILTO: ein, z.B. ACTION="MAILTO:"name@uni-xyz.de"". An diese Adresse werden die Formular-Angaben geschickt.
• Dies funktioniert aber nur dann, wenn der Browser für den Mail-Versand richtig konfiguriert ist. Selbst dann gibt es mit manchen Browsern Probleme.
• "Ein anderes Problem besteht darin, daß die Formulardaten beim Abschicken per Voreinstellung nach einem bestimmten Mime-Type kodiert werden, dem Mime-Typ application/x-www-form-urlencoded. Dabei werden alle Leerzeichen, verschiedene Sonderzeichen und Umlaute durch spezielle Zeichenfolgen ersetzt. So lautet beispielsweise der Satz Danke für die Hilfe! nach der Umwandlung: Danke+f%FCr+die+Hilfe%21. Für Menschen ist das ziemlich ungenießbarer Lesestoff. Um die Kodierung zu verhindern, können Sie im einleitenden <form>-Tag zwar die Angabe enctype="text/plain" angeben. Von Anwendern, deren WWW-Browser diese Angabe jedoch nicht interpretiert, werden Sie dennoch kodierte Formulardaten erhalten. Um kodierte Formulardaten nachträglich in lesbaren Text zu dekodieren, können Sie ein Hilfsprogramm wie WebParse für Windows verwenden." (Münz)
• Als METHOD= kommt bei E-Mail-Übertragung nur POST in Frage.
• Also:

  
  <FORM ACTION="MAILTO:"hilberer@ub.uni-duesseldorf.de"" METHOD=POST
  ENCTYPE="text/plain">
  ...
  </FORM>
  

Eingabefelder

Einzeilige Text-Eingabefelder

• Für die Eingabe von Buchstaben und Zahlen.
• Jedes Eingabefeld wird mit <input ... > eingeleitet und definiert ("input = Eingabe"). Will man ganz korrekt sein, so fügt man type=text hinzu.
• "Jedes Eingabefeld muß einen internen Bezeichnernamen erhalten, und zwar mit der Angabe name="...". Der Name sollte nicht zu lang sein und darf keine Leerzeichen und keine deutschen Umlaute enthalten. Verwenden Sie als Sonderzeichen höchstens den Unterstrich "_". Setzen Sie den Namen in Anführungszeichen." (Münz)
• Also:

  Verfasser: <INPUT TYPE="TEXT" NAME="Verfasser">
  

Absenden und Zurücksetzen (Submit und Reset)

• "Zwei Standard-Buttons stellt HTML zur Verfügung, um Formulareingaben zu handhaben: einen Button zum "Absenden" und einen zum "Abbrechen". Mit dem Absende-Button kann der Anwender das ausgefüllte Formular losschicken. Mit den Formulardaten geschieht dann das, was im einleitenden <FORM>-Tag bei ACTION="..." festgelegt wurde . Mit dem Abbrechen-Button kann der Anwender alle Eingaben verwerfen. Das Formular wird nicht abgeschickt." (Münz)
• "Mit <input type="submit" ...> definieren Sie einen Absende-Button ("input = Eingabe", "submit = bestätigen"). Beim Anklicken dieses Buttons werden die Formulardaten abgeschickt. Mit <input type="reset"...> definieren Sie einen Abbrechen-Button ("reset = zurücksetzen"). Eingegebene Daten werden verworfen und nicht abgeschickt." (Münz)
• Mit VALUE="..." wird die Beschriftung des Buttons festgelegt.
• Also:

  <input type="submit" value="Formular abschicken">
  <input type="reset" value="Eingaben löschen">
  

Erstes Beispiel: Einfaches Formular: Anschaffungsvorschlag

<H3 ALIGN=CENTER>Anschaffungsvorschlag</H3>
Ich bitte die Bibliothek, folgendes Werk anzuschaffen:<P>
<FORM ACTION="MAILTO:"th@hilberer.de"" METHOD=POST
ENCTYPE="text/plain">

Titel: <INPUT TYPE="TEXT" NAME="Titel"><BR>
Verfasser: <INPUT TYPE="TEXT" NAME="Verfasser"><P>

Ihr Name: <INPUT TYPE="TEXT" NAME="Name"><BR>
Ihre Fachrichtung: <INPUT TYPE="TEXT" NAME="Fach"><BR>
Ihre E-Mail-Adresse: <INPUT TYPE="TEXT" NAME="EMail"><P>

<INPUT TYPE="SUBMIT" VALUE="Formular abschicken">
<INPUT TYPE="RESET" VALUE="Eingaben löschen">
</FORM>

Anschaffungsvorschlag

Absendedatum:     Thu, 03 Sep 2000 11:01:20 +0200
Von:              Thomas Hilberer <hilberer@uni-duesseldorf.de>
Organisation:     ULB Duesseldorf
An:               hilberer@ub.uni-duesseldorf.de
Betreff:          Form posted from Mozilla
Titel=Jim Knopf und Lukas der Lokomotivführer
Verfasser=Michael Ende
Name=Thomas Hilberer
Fach=Germanistik
EMail=hilberer@ub.uni-duesseldorf.de

Eingabefelder, Fortsetzung

Einzeilige Text-Eingabefelder

• Die Breite des dargestellten Eingabefeldes kann mit dem SIZE-Attribut vorgeschrieben werden. Dabei wird die Feldbreite in Zeichen angeben, also z.B. SIZE=10. Wird dieses Attribut nicht verwendet, wählt der Browser eine beliebige (aber einheitliche) Feldlänge (siehe obiges Beispiel).
• "Die Länge des Textes, den der Benutzer in ein Feld eingeben kann, ist normalerweise unbeschränkt (bei zu kleiner SIZE verschiebt sich der Feldinhalt am Bildschirm entsprechend). Mit dem Attribut MAXLENGTH kann man die maximale Eingabelänge bestimmen." (Ramm, S. 239)
• Will man in einem Eingabefeld einen voreingestellten Text anzeigen lassen, dann verwendet man das Atrribut VALUE="...", z.B.

  <FORM>
  Ihre E-Mail-Adresse: <INPUT TYPE="TEXT" size="30" maxlength="35"
  NAME="EMail" VALUE="@uni-xyz.de">
  </FORM>
  

  Ihre E-Mail-Adresse:

Checkboxen

• Markierbare Kästchen.
• Gewünschter Pizza-Belag:
  Käse Oliven Sardellen Knoblauch

• <FORM>
  <INPUT TYPE=CHECKBOX NAME="kaese">Käse
  <INPUT TYPE=CHECKBOX NAME="oliven">Oliven
  <INPUT TYPE=CHECKBOX NAME="sardellen">Sardellen
  <INPUT TYPE=CHECKBOX NAME="knofi">Knoblauch
  </FORM>
  

• Ergibt in der E-Mail z.B.

  kaese=on
  oliven=on
  knofi=on
  

Radio Buttons

• Optionsschalter, von denen pro Gruppe immer nur einer ausgewählt werden kann (cf. Senderwahlknöpfe beim Radio).
• "Alle Radio-Buttons, die zur gleichen Gruppe gehören, müssen das gleiche NAME- und je ein unterschiedliches VALUE-Attribut besitzen. Als Ergebnis wird der Name und der Wert des VALUE-Attributs des ausgewählten Knopfes übergeben." (Ramm, S. 239)
• Gewünschte Pizza-Größe:
  klein mittel groß

• <FORM>Gewünschte Pizza-Größe:<BR>
  <INPUT TYPE=RADIO NAME="groesse" VALUE="klein">klein
  <INPUT TYPE=RADIO NAME="groesse" VALUE="mittel">mittel
  <INPUT TYPE=RADIO NAME="groesse" VALUE="gross" CHECKED>groß
  </FORM>
  

• CHECKED: Voreinstellung dieses Feldes.
• Ergibt in der E-Mail z.B.

  groesse=gross
  

Select

• Mit <SELECT> definiert man eine Auswahlliste.
• Die auszuwählenden Elemente dieser Liste werden mit <OPTION> markiert.
• Das Attribut NAME ist auch hier der interne Bezeichnername.
• Auf VALUE kann verzichtet werden, der Browser liefert dann den Inhalt des OPTION-Feldes. Enthält dieses Sonderzeichen oder mehr als ein Wort, sollte mit VALUE gearbeitet werden.
• Das Attribut SELECTED bezeichnet das voreingestellte Element der Auswahlliste. Wird es nicht verwendet, dann ist das erste Element voreingestellt.
• Titelstichwort vollständiger Titel Titelstichwort/Schlagwort

• <form><SELECT NAME="Titelart">
  <OPTION VALUE="STI" SELECTED>Titelstichwort
  <OPTION VALUE="TIT">vollständiger Titel
  <OPTION VALUE="BAS">Titelstichwort/Schlagwort
  </SELECT></form>

Mehrzeilige Eingabefelder

• <TEXTAREA>...</TEXTAREA> erzeugt ein mehrzeiliges Eingabefeld.
• Mit den Attributen ROWS=... und COLS=... werden Zeilen- und Spaltenzahl des Textfeldes eingestellt.
• Will man im Eingabefeld einen voreingestellten Text anzeigen lassen, dann schreibt man diesen zwischen <TEXTAREA> und </TEXTAREA>.
• Mit NAME="..." wird das Eingabefeld für die Weitergabe ans verarbeitende Programm benannt.
• Hier können Sie 'was Sinnvolles reinschreiben!

  <FORM>
  <TEXTAREA ROWS=3 COLS=60 NAME="kommentar">
  Hier können Sie 'was Sinnvolles reinschreiben!</TEXTAREA>
  </FORM>
  

• <TEXTAREA> kann um das Attribut WRAP= erweitert werden, um den Zeilenumbruch zu steuern. Dies wird aber sowohl von Browsern wie von Übertragungsprogrammen öfter ignoriert, so daß man besser in den Text einen Hinweis schreiben sollte wie "bitte betätigen Sie vor Erreichen des rechten Randes die Return-Taste!"

Hidden

• "Sie können Felder in einem Formular definieren, die dem Anwender nicht angezeigt werden. Versteckte Felder können Daten enthalten. Beim Absenden des Formulars werden die Daten versteckter Felder mit übertragen. Auf diese Weise können Sie beispielsweise zusätzliche Informationen an CGI-Programme übergeben oder erläuternden Text einfügen, der bei der E-Mail-Übertragung der Formulardaten in der E-Mail mit enthalten ist." (Münz)
• "Mit <input type=hidden ...> definieren Sie versteckte Daten in einem Formular. Die Daten selbst bestimmen sie mit der Zusatzangabe value="..."." (Münz)
• "Felder vom Typ HIDDEN sind nur sinnvoll, wenn Sie dasselbe Skript für mehrere verschiedene Formulare verwenden und bei bestimmten Formularen einige Wahlmöglichkeiten ausschließen möchten. Ein HIDDEN-Feld ist für den Benutzer nicht sichtbar, sondern sendet ein festgelegtes Paar Name/Wert an das Skript, wenn der Benutzer das Formular abschickt." (Ramm, S. 241)
• HIDDEN ist in der Praxis vor allem dann erforderlich, wenn man bestehende umfangreiche Formulare für seine Zwecke reduzieren, und deshalb bestimmte Auswahlmöglichkeiten nicht anbieten möchte.
  Beispiel: Das OPAC-Formular soll für eine Schnellsuche verkürzt werden:
  • vollständiges Formular wird verkürzt zu
  • Schnellsuche im Katalog: Titel: oder Person:
  • Erläuterung:

    <INPUT ID="MaxTreffer" NAME="MaxTreffer" SIZE=5
    MAXLENGTH=3 VALUE="50">

    
    wird durch HIDDEN ergänzt und damit werden die voreingestellten Werte unsichtbar übertragen:

    <INPUT ID="MaxTreffer" NAME="MaxTreffer" SIZE=5
    MAXLENGTH=3 VALUE="50" TYPE=HIDDEN>
    

  • Weiteres Beispiel: Der Fahrplan des Verkehrsverbundes Rhein-Ruhr (VRR) wird "individualisiert".

Exkurs: Knopf als Hyperlink

<FORM ACTION="http://www.uni-duesseldorf.de/WWW/ulb/" METHOD="GET">
<INPUT TYPE=SUBMIT VALUE="Hier geht's zur ULB!">
</FORM>

Andere Methoden der Datenübertragung

• Die Datenübertragung per E-Mail über die Mail-Funktion des Browsers (Client) ist leider nicht sehr zuverlässig, und in vielen Fällen funktioniert sie überhaupt nicht.
• Sicherer und komfortabler sind Programme, die auf dem Server laufen.
• Sie bieten zudem eine Vielzahl von Möglichkeiten, die per E-Mail-Übertragung nicht zu realisieren sind (OPAC, Gästebuch, Einkaufskorb, Chat etc.). Dabei spricht man von "dynamischen Webseiten", also Seiten, die erst bei Abruf aus HTML und Daten generiert werden.
• HTML ist ja bekanntlich eine Markierungs- und keine Programmiersprache.

CGI (Common Gateway Interface)

• Auch CGI ist keine Programmiersprache, sondern eine Schnittstelle zur Generierung von HTML-Code.
• Es ist die Standard-Schnittstelle vieler WWW-Server.
• Der Benutzer bzw. der Client schickt ein ausgefülltes Formular an den Server, dieser startet ein Programm, das dann eine HTML-Seite generiert. Der WWW-Server schickt diese an den Client zurück.
• Für die Programmierung kommen mehrere Sprachen in Frage, am häufigsten ist Perl. Die Wahl der Programmiersprache ist nicht zuletzt davon abhängig, ob das entsprechende Programm auf dem eigenen WWW-Server laufen kann.
• Die Anwendung muß also mit dem Webmaster abgesprochen werden - der öfter zögern wird, fremde Programme auf seinen Server zu legen.
• Fertige Programme sind im Internet frei verfügbar, z.B. via The CGI Resource Index.
• Ist das entsprechende Programm auf dem Server installiert, erfolgt der Zugriff einfach über

  <FORM ACTION="URL des CGI-Programms" METHOD="POST">
  

  Beispiel:
  Wenn Sie rasch auf den Datenbestand der Düsseldorfer Virtuellen Bibliothek zugreifen wollen, können Sie das Suchfeld für die Volltextsuche auf Ihren Seiten einbauen.

  Dazu bringen Sie einfach mit Copy-and-Paste folgenden HTML-Code auf eine Ihrer Seiten:

  ---

  <FORM ACTION="http://www.uni-duesseldorf.de/cgi-bin/AT-ulbsearch.cgi" METHOD="POST">
  <strong>Suche in der Düsseldorfer Virtuellen Bibliothek:</strong>
  <INPUT NAME="search" size=28 maxlength=200>
  <INPUT TYPE=submit VALUE="Suchen">
  </FORM>
  

  ---

  Das Ergebnis sieht dann so aus:
  Suche in der Düsseldorfer Virtuellen Bibliothek:

  ---

PHP

• Wenn man keine Programmiersprache beherrscht, kann man CGI-Programme lediglich als Ganzes übernehmen, aber kaum modifizieren - man ist also immer auf die Mithilfe von EDV-Spezialisten angewiesen.
• Außerdem gibt es starke Sicherheitsbedenken gegenüber CGI.
• Diese Nachteil kann man umgehen, wenn der Webmaster sich bereit erklärt, das PHP-Programm als Unterprogramm in den HTTP-Server zu integrieren (problemlos beim Apache-Server möglich). PHP-Dokumente werden dann an einer speziellen Endung erkannt, z.B. .phtml.
• Seiten mit bedingtem Inhalt ("Dieser Absatz ist nur sichtbar bei einem Zugriff von einer IP-Adresse, die mit 134.99. beginnt") und vor allem Formulare, deren Daten per E-Mail vom Server verschickt werden, Gästebücher u.a. lassen sich damit einfach realisieren (alle dynamischen Seiten der ULB Düsseldorf sind in PHP geschrieben, mit Ausnahme des Suchformulars).
• Beispiel: Elektronischer Briefkasten - im Quelltext der Seite erkennt man:
  

  <FORM  ACTION="kritik.php3"  METHOD=POST>

  damit wird auf eine PHP-Seite verwiesen, deren gesamter Quelltext nie angezeigt wird.
• Kleine Spielerei:
  • Heute ist der 24.04.2024; es ist 10:43:24 Uhr.
    

    <? echo "Heute ist der ", Date("d.m.Y"), "; es ist ", Date("H:i:s"), " Uhr."; ?>

  • An diesem Beispiel kann man sich auch gut klarmachen, was der Ausdruck "dynamische Web-Seite" bedeutet: bei jedem Abruf wird die Seite neu erzeugt.
• Alles Weitere findet sich in den PHP-Kochrezepten für typische Anwendungen (Bernd Cappel), die - wie der Name schon sagt - einfach übernommen und modifiziert werden können.

Java, Javascript und ActiveX

Java

Plattformunabhängige Programmiersprache, entwickelt von der amerikanischen Firma Sun Microsystems. Soll die Interaktion zwischen Client und Server erleichtern und beschleunigen, indem kleine Programme auf den Browser-Rechner übertragen werden, die z.B. Suchfunktionen ausführen.
Erfordert neuen Browser und 32-bit-Betriebssystem (WIN95/98/NT).
Beispiel: Java-WWW-OPAC der Bayerischen Staatsbibliothek.

Javascript

Scriptsprache. Die Scripts werden einfach in den HTML-Text der Seite eingebettet und vom Browser interpretiert. Bringt mit Sicherheit einen der verwendeten Browser zum Absturz und sollte deshalb nur auf Seiten verwendet werden, von denen man weiß, daß sie nur mit einem bestimmten Browser aufgerufen werden und bei diesem keine Fehlermeldung erzeugen - also bei internen Seiten.
Zudem gibt es Sicherheitsprobleme: BSI warnt vor dem Einsatz von JavaScript ("Das BSI (Bundesamt fuer Sicherheit in der Informationstechnik) empfiehlt den Betreibern von WWW-Servern dringend, vollständig auf JavaScript zu verzichten")
Fürs Internet nicht geeignet!

ActiveX

Plattformabhängige Alternative der Firma Microsoft zu Java. Große Sicherheitsprobleme.

Weitere Informationen

HTML-Kurs, 10: Metadaten

HTML-Kurs

TNL: Publizieren im Internet