Ratgeber: Webtechnik

So erzeugen Sie Formular-Dialogseiten in HTML

Gestalten Sie mehrseitige HTML-Dialoge in Ihren Web-Projekten ganz einfach selbst. Der Beitrag zeigt, wie Sie dies auch ohne Java-Unterstützung erreichen, da diese auf vielen PC-Systemen aus Sicherheitsgründen deaktiviert ist.

Beispiel-Dialogseite

© Hersteller/Archiv

Eine Beispiel-Dialogseite mit Abfrage der Benutzerdaten und der gewünschten Versandart für eine Auftragsabwicklung.

Wenn Sie sich im Internet auf einer Webseite für die Nutzung oder einen Einkauf registrieren, füllen Sie meist über mehrere Dialoge hinweg Felder für Angaben wie Name, Anschrift und Bankverbindung für die Zahlungsabwicklung aus. Diese Abfragen werden dabei sinnvollerweise - um die Übersicht zu bewahren - auf verschiedene Kategorien und damit Einzelseiten verteilt. So praktisch und logisch diese Informationserfassung auch aufgebaut ist, so umständlich ist die Datenhaltung, Navigation und Auswertung durch speziellen Quellcode für die verschiedenen Webseiten.

Dies liegt daran, dass die verschiedenen verwendbaren HTML-Elemente auf der einen Seite und das veraltete Internet-Übertragungsprotokoll http (Hypertext-Transfer Protocoll) auf der anderen Seite das komplizierte und bidirektionale Handling von mehrseitigen Dialogen nicht direkt unterstützen. Das Problem ist die Speicherung der Eingabedaten auf der jeweiligen Webseite.

Benutzereingaben dauerhaft speichern

Sie füllen eine erste Webseite mit Ihren Adressdaten aus und klicken auf die Schaltfläche Weiter, um auf die nächste Webseite für die Kommunikationsinformationen zu gelangen. Auf der zweiten Seite angekommen, sind die Daten der ersten Seite ohne entsprechende Vorkehrung jedoch gelöscht, da der Browser des Webseiten-Besuchers die vorhandenen Daten in den Eingabefeldern nicht automatisch lokal speichert.

Wenn Sie auf die Schaltfläche Zurück klicken, um vorherige Eingaben einzusehen oder zu ergänzen, haben Sie das gleiche Problem. Das nervt Besucher über kurz oder lang und kann dazu führen, dass sie der Seite fern bleiben. Abhilfe schaffen Sie, wenn Sie für größere Web-Projekte Web-Technologien wie Ajax oder JQuery verwenden, die eine derartige Datenspeicherung direkt unterstützen. Für eigene kleine Webprojekte wäre das jedoch zu aufwändig.

Zwischenspeicher bei Sitzungen nutzen

Mit einer so genannten Session (Sitzung) verfügen Sie über einen temporären Zwischenspeicher auf dem Besuchersystem. Dieser ist solange aktiv, wie der Benutzer den Browser auf seinem System geöffnet hält. Mit ein wenig Quelltext und geringem Programmieraufwand lässt sich das Session-Management auch in bereits bestehende Webseiten und -projekte integrieren.

Auf jeder Webseite für den Dialog markiert das HTML-Element <form> einen speziellen Bereich für Benutzereingaben. Innerhalb dieses Elements werden Eingabefelder oder andere Bedienelemente wie Checkboxen oder Listenfelder zur Datenerfassung definiert. Bei mehrseitigen Dialogen verweist das Attribut action="Seite2.php" aus dem Form-Element der ersten Seite bei einem Klick auf die mit Weiter beschriftete Submit-Schaltfläche auf die Folgeseite. In der Seite2.php müssen dann die per Post-Methode übergebenen Werte der Eingabefelder bzw. Bedienelemente von der Seite 1 in eine Session eingelesen werden. Der grobe Aufbau des Formularbereiches:

<form name="Seite1" action="Seite2.php" method="post"><input id="name" type="text" name="name" size="40"><input id="vorname" type="text" name="vorname" size="40">
...<input type="submit" value="Weiter"></form>

In der Script-Datei Seite2.php ist als erstes dafür zu sorgen, dass eine korrekte neue Session gestartet oder eine bereits bestehende weiterverwendet wird. Dies erreichen Sie über den PHP-Befehl session_start(). Dann lesen wir den/die übertragenen Formularwert(e) von Seite 1 in die entsprechenden Session-Variablen nach folgendem Schema ein. Es hat sich bewährt, die Session-Variablen nach den Feldbezeichnern zu benennen und damit für klare Begrifflichkeiten zu sorgen.

$_SESSION['name'] = $_Post['name'];

Nach dieser Vorgabe erstellen Sie die benötigte Zahl Seiten für Ihr Projekt. Am Ende Ihres mehrseitigen Dialoges haben Sie dann alle Eingabefelder und Benutzerelemente in der Session-Variable $_SESSION abgelegt. Diese Werte können Sie dann in einer E-Mail als Bestätigung an den Benutzer zusammenfassen oder die einzelnen Informationen in eine Datenbank als z.B. Bestellung eintragen. Damit gehen Ihnen die Benutzerdaten beim Seitenwechsel nicht mehr verloren. Das in der globalen Session-Variable erzeugte Daten-Array mit den Feldbezeichnern bleibt solange erhalten, bis der Browser durch den Benutzer geschlossen wird.

Eintragen beim Zurückspringen

Ein mehrseitiger HTML-Eingabedialog sollte den Komfort bieten, auf die zurückliegenden Seiten springen zu können. Dabei sollten dann aber auch die dort bereits eingetragenen Werte wieder erscheinen. Andernfalls müsste der Benutzer bei einem Rücksprung alle Werte neu eintragen. Diesen Komfort erreichen wir mit einem einfachen Trick: Wir setzen ab der zweiten Dialogseite eine Zurück-Schaltfläche mit einem erweiterten Link ein. Da aber jedes Form-Element nur einen Submit-Button haben darf, verwenden wir das <a>-Element in Kombination mit einem <button>-Element nach folgendem Schema:

<a href="Seite1.php?set=1"><button type="button">Zurück</
button></a><input type="submit" value="Bestellen">

Nun sorgen wir dafür, dass in jeder PHP-Datei der einzelnen Dialogseiten auch der Parameter set=1 ausgewertet wird, der bei einem Rücksprung das Einsetzen der vorhandenen Werte in die Benutzerfelder auslöst. Die Eingabefelder für die Benutzerdaten erweitern Sie um das Attribut value="" mit entsprechenden Platzhaltern in der Form %Platzhalter% wie folgt, damit die vorhandenen Session-Werte dort eingetragen werden können. Die Platzhalter benennen Sie ebenfalls nach den Feldnamen.

<input id="name" type="text" value="%name%" name="name"
size="40"><input id="vorname" type="text" value="%vorname%"
name="vorname" size="40">

Dazu sollten Sie die HTML-Seiten der Dialoge jedoch als Templates in einer separaten Textdatei (hier hat sich die Endung .tpl etabliert) anlegen, damit die Ersetzungen über Platzhalter komfortabel zu erledigen sind.

Kaufberatung: Shared-Webhosting-Anbieter

In der einfachsten Form liegen damit alle HTML-Anweisungen in einer separaten Textdatei, die später dann in die Scriptdatei eingefügt wird. Die Datei wird dann etwa über den PHP-Befehl

file_get_contents()
in eine Variable wie folgt eingelesen:
$template = file_get_contents('Seite1.tpl');

In den Scriptdateien können wir nun mit einer if- oder case-Anweisung prüfen, ob der Wert 1 in der Variablen set gesetzt ist. Ist dies nicht der Fall, sind in jedem Fall die Platzhalter im HTML-Quelltext mit einem Leerzeichen zu ersetzen, damit diese auf der Seite nicht im Klartext erscheinen. Falls der Wert gesetzt ist, werden die korrespondierenden Werte aus der Session in die Eingabefelder aus dem Template nach folgendem Schema eintragen:

$set = $_Post['set'];
if ($set == 1) {
$template = str_replace('%name%',$_
SESSION['name'],$template);
$template = str_replace('%vorname%',$_
SESSION['vorname'],$template);
} else {
$template = str_replace('%name%',' ',$template);
$template = str_replace('%vorname%',' ',$tem
plate);
}

Die Variable $template enthält dabei die kompletten und aktualisierten HTML-Inhalte für die Dialogseite. Nach dem Ersetzen der Platzhalter können Sie die Datei z.B. mit

echo $template

ausgeben bzw. anzeigen. Das Vorgehen ist variabel und richtet sich nach Ihren Projektvorgaben beispielsweise einer bereits bestehenden Seitenstruktur.

Eindeutige Navigation sicherstellen

Bread-Crumb

© Hersteller/Archiv

Ein visueller Bread-Crumb zeigt dem Benutzer die Position im Dialog.

Bread-Crumb-Einbindung

© Hersteller/Archiv

Die reine Template-Datei zeigt die oben zu sehende Bread-Crumb-Einbindung im HTML-Quellcode.

Mit dieser einfachen Technik können Sie nun auch komplexe mehrseitige HTML-Dialoge für Ihre eigenen Webprojekte erzeugen. Achten Sie im Rahmen der Navigation darauf, dass auf der ersten Dialogseite nur eine Weiter-Schaltfläche zu sehen ist, da hier ein Zurück ja nicht möglich ist. Ab der zweiten Dialogseite sollten Sie dann je eine Weiter- und Zurück-Schaltfläche vorsehen und die letzte Dialogseite darf wiederum nur beispielsweise eine Fertigstellen-Schalfläche enthalten, die den Dialog dann auch beendet und auf eine andere Seite (z.B. eine Zusammenfassung) verweist.

Ein optischer Bread-Crumb am oberen Rand (siehe Abbildung) sollte zur besseren Orientierung die aktuelle Seite und die Gesamtzahl der Dialogseiten farblich aufzeigen.

Prüfroutine einbauen

Ein weiterer wichtiger Aspekt ist das Thema Sicherheit. Hier hätte man die Möglichkeit, über die Formular-Methode OnSubmit eine Prüfroutine für die Formulardaten einzuhängen. Sie sollten sich überlegen, ob Sie die eingegebenen Daten vor dem Senden oder Speichern ausreichend überprüfen (Thema Cross-Site-Scripting). Gerade Formulare mit Eingabefeldern können ohne Prüfroutine schnell zum Einfallstor für Angriffe werden.

Weiterführende Hinweise

Wir empfehlen folgende informativen Links zum Thema Formularseiten und PHP:

PHP-Sessions verwalten:

www.php-einfach.de/php-tutorial/php-sessions.php

SelfPHP Tutorial Formulare:

www.selfphp.de/praxisbuch/praxisbuch.php?group=32

Kurze Einführung in die Formularverarbeitung

www.php-faq.de/q-stil-normalform.html

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Film Amazon Prime Instant Video Warner Bros Emily Browning
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im Oktober mit Highlights wie "Sucker Punch", "Fifty Shades of Grey", "Spotlight" und der zweiten Staffel von "Ash vs. Evil…