|
Systemvoraussetzung
- Linux
- Windows
- PHP 3
- PHP 4
- PHP 5
Datei(en)
form.php, formStyle.css
Problem
Sie besitzen auf Ihrer Website ein Formular, mit dem Sie Benutzerdaten wie
Vorname, Nachname, Straße, PLZ, Ort etc. abfragen. Diese Daten könnten z. B.
bei einem Gewinnspiel, das Sie ausloben, anfallen.
Sicherlich werden Sie in diesem Fall Pflichtfelder nutzen wollen, also Felder (z. B.
Vorname, Nachname oder E-Mail),
die zwingend ausgefüllt werden müssen. Es
kommt aber häufig vor, dass ein Benutzer ein Feld nicht ausfüllt und dennoch
das Formular abschickt. Jetzt liegt es an Ihnen, den Benutzer auf seinen Fehler
hinzuweisen.
Lösung
Es gibt verschiedene Lösungswege, die man einschlagen kann. Sie könnten
neben jedem Feld einen Texthinweis listen, dass dieses Feld ausgefüllt werden
muss. Der Nachteil ist aber, dass Sie im Vorfeld diesen Platz freihalten müssen,
um keine Verschiebung Ihres Formulars zu erhalten. Eine andere Möglichkeit
besteht darin, dass beim Neuladen der Seite ein Hinweistext angezeigt wird. In
diesem Text könnte z. B. Folgendes stehen:
„Bei der Übermittlung Ihrer Daten ist es zu einem Fehler gekommen. Bitte
füllen Sie alle Pflichtfelder aus, und senden Sie das Formular erneut ab.“
Diese Variante scheint jedoch ebenfalls nicht genügend aussagekräftig zu
sein. Der Benutzer weiß zwar, dass er etwas vergessen hat, worum genau
es sich dabei handelt, ist ihm in diesem Moment allerdings noch nicht klar.
Sie könnten in dem Text zwar genau sagen, was fehlt, beispielsweise der Vorname, damit erhöhen Sie aber den programmiertechnischen Aufwand und
die Fehlerdarstellung an sich – also die Größe des Fehlertextes. Und es gibt
nichts Schlimmeres, als ellenlange Fehlermeldungen anzuzeigen.
Die wohl beste Methode ist die visuelle Darstellung der Fehlermeldung. Sie
sollten es Ihren Besuchern so leicht wie möglich machen, den Fehler zu finden.
Aber was versteht man eigentlich unter visueller Darstellung?
Die Lösung hierfür besteht jetzt aus zwei Bereichen. Zum einen müssen wir
beim Neuladen der Seite einen Hinweistext zeigen. Dieser sollte im oberen
Bereich der Seite platziert werden, sodass er sofort gesehen wird. Am besten
ist es, wenn man diesen Text in einer Tabelle platziert und farbig hervorhebt.
Der Tabellenrahmen könnte mit einer 1 Pixel großen roten Outline (Linie) und
der Tabellenhintergrund mit einer gelben Farbe dargestellt werden. Der Text
darin sollte kurz und prägnant sein. Er könnte etwa folgendermaßen lauten:
| Achtung! Es ist zu einem Fehler gekommen. Bitte füllen Sie alle farbig
markierten Pflichtfelder aus. |
So eine Fehlermeldung ist nicht so leicht zu übersehen, zumal wir in dem
gleichen Farbton auch die fehlenden Felder markieren. Der Benutzer sieht
dann sofort, wo er noch etwas eintragen muss.
Diese Lösung ist zwar bereits sehr gut, sie kann aber noch erweitert und
verbessert werden. So könnte es beispielsweise passieren, dass einer der
WebseitenBesucher
farbenblind ist und unsere Fehlermeldung nur sehr schwer
interpretieren bzw. nicht farbig unterscheiden kann.
Besser wäre es deshalb, zusätzlich noch ein grafisches Symbol aufzulisten,
das wir im Fehlerfall in unserer zuvor gezeigten Tabelle sowie vor jedem nicht
ausgefüllten Pflichtfeld setzen.
 |
Achtung! Es ist zu einem Fehler gekommen. Bitte füllen Sie alle farbig
markierten Pflichtfelder aus. |
Diese Darstellung ist schon wesentlich besser und fällt sicherlich schnell auf.
Auf der folgenden Seite sehen Sie beide Formularmöglichkeiten, einmal im
unausgefüllten Zustand und einmal nach Eintreten eines Fehlers. Sie können
jetzt sehr gut sehen, wie Ihr Formular aufgebaut sein kann und vor allem, wie
es mit Fehlern umgeht. Sie zeigen Ihren Besuchern mit einem solchen Formular
bzw. derartigen Fehlermeldungen, wie wichtig sie Ihnen sind – und das sollten
sie auch sein!
Abbildung 3.1: Formular im Ursprung
Nachdem Sie gesehen haben, wie das Formular im Fehlerfall reagiert, können
wir uns jetzt den Programmcode kümmern. Im Anschluss an diesen Programmcode
werden Sie den Quellcode der HTML-Seite
sowie die CSS-Definitionen
sehen, damit Sie die Wirkungsweise besser verstehen.
Zuerst definieren wir die komplette URL (3) von unserem Skript, da wir diese
Variable zum einen in unserem Formular benötigen und zum anderen, um die
Datei nach erfolgreichem Absenden neu zu laden. Beim Neuladen der Seite
übergeben wir mit GET den Wert „TRUE“, um dem Besucher anzuzeigen (38-44),
dass alles gespeichert wurde.
Zuvor müssen wir uns aber der Fehleranalyse widmen. Wir definieren in einem
Array (5) die Felder, die auch als Pflichtfelder anzusehen sind. Wichtig ist
allerdings, dass diese Felder im Formular bekannt sind. Damit Sie nicht zum
HTML-Quellcode
wechseln müssen, sehen Sie für das Pflichtfeld „lastname“
den InputTag
im Formular.
|
<INPUT class="<?PHP echo $errorClass[’lastname’]; ?>" name="lastname" value="<?PHP echo $_POST[’lastname’]; ?>">
|
Zwei entscheidende Bereiche, die für unsere Fehleranalyse sehr wichtig sind,
sehen Sie hier direkt: zum einen die CSS-Klasse
|
(class="<?PHP echo $errorClass['lastname']; ?>")
|
Abbildung 3.2: Formular mit Fehlermeldung
und zum anderen den ValueWert
|
(value="<?PHP echo $_POST['lastname']; ?>")
|
Wenn es zu einem Fehler kommt, soll unser Besucher nicht die bereits ausgefüllten
Felder noch einmal ausfüllen müssen. Daher wird der Wert wieder in
das Feld geschrieben, und unser Besucher muss nur noch die fehlenden Felder
ergänzen.
Die CSS-Klasse
belegen wir im Grundzustand mit unserer normalen CSS-Definition
(15-17),
da das Formular gerade erst geladen wurde und noch
keine Fehler enthalten kann. Erst wenn das Formular abgeschickt wird, können
sich die Klassen verändern. Zwar werden erst einmal alle Felder mit der
Grundklasse belegt, im Fehlerfall aber mit der Fehler-Klasse
überschrieben.
Beispiel für das Feld lastname
|
$errorClass[’lastname’] = ’ inputField ’; |
Wir durchlaufen (24-34)
jetzt (das Formular wurde abgeschickt) unser zuvor
erstelltes Array (5) und überprüfen (27) dabei, ob jedes Feld, das sich in
unserem Array befindet, eventuell in der übermittelten POST-Variable
leer ist.
Sollte das der Fall sein, überschreiben (30) wir die CSS-Klasse
für dieses Feld
mit unserer Error-Klasse.
Zusätzlich speichern wir das Hinweisbild ebenfalls
in einem Array – dieses Array wird im Formular vor dem jeweiligen Namen
des Feldes ausgegeben.
Beispiel für das Feld lastname
| |
$errorClass[’lastname’] = ’errorField’;
$errorPicture[’lastname] = ’<img src="achtung_klein.gif"> ’;
|
Wie Sie sehen, war die Fehleranalyse bisher ein Kinderspiel. Ich kann Sie
beruhigen, viel mehr müssen wir auch nicht mehr machen. Die Zeilen (38-44)
werden erst einmal nicht ausgeführt, da dieser Bereich erst beim Neuladen,
also nach dem Speichern der Daten, greift.
Sobald alle Daten gespeichert wurden, wird die Seite neu geladen (62) und
übergibt per GET den Wert „TRUE“. Somit können wir jetzt auch unsere Tabelle
mit dem Hinweistext anzeigen, dass alles gespeichert wurde. Diese Variante
des Neuladens hat einen zusätzlichen Vorteil. Bei einem Reload der Seite
würden nicht noch einmal die gleichen Seiten per POST gesendet.
Sollte es aber zu einem Fehler gekommen sein, und unser Array mit den
Pflichtfeldern wurde gefüllt, so greift hier die zusätzliche Ausgabe (48-54),
die
dann eine Tabelle mit einem Hinweisbild und einem Fehlertext anzeigt.
Unsere Fehleranalyse ist somit abgeschlossen, alle Variablen gefüllt und zur
Ausgabe bereit. Weiter unten in der HTML-Seite
werden diese Variablen bzw.
unser Fehler-Array
ausgegeben.
003:
004:
005:
006:
007:
008:
009:
010:
011:
012:
013:
014:
015:
016:
017:
018:
019:
020:
021:
022:
023:
024:
025:
026:
027:
028:
029:
030:
031:
032:
033:
034:
035:
036:
037:
038:
039:
040:
041:
042:
043:
044:
045:
046:
047:
048:
049:
050:
051:
052:
053:
054:
055:
056:
057:
058:
059:
060:
061:
062:
|
$script = 'http://' . $_SERVER["SERVER_NAME"] . $_SERVER["SCRIPT_NAME"];
$errorFields = array('firstname',
'telefone',
'lastname',
'email',
'street',
'plz',
'city',
'gender'
);
for($x=0;$x<count($errorFields);$x++)
{
$errorClass[$errorFields[$x]] = 'inputField';
}
if(isset($_POST['submit']))
{
$error = FALSE;
foreach($errorFields as $key => $value)
{
if(empty($_POST[$errorFields[$key]]))
{
$error = TRUE;
$errorClass[$value] = 'errorField';
$errorPicture[$value] = '<img src="achtung_klein.gif"> ';
}
}
}
if($_GET['check'] == "TRUE")
{
$errorMessage = '<table width="100%" class="errorTable"><tr><td><b>
Ihre Bestellung war erfolgreich!</b><br><br>
Vielen Dank für Ihre Bestellung des Jahresabos.
Ihre Daten wurden weitergeleitet.</td></tr></table><br>';
}
if(isset($_POST['submit'])){
if($error == TRUE)
{
$errorMessage = '<table width="100%" class="errorTable"><tr><td>
<img src="achtung_gross.gif"></td><td><b>Achtung!</b><br>
Es ist zu einem Fehler gekommen. Bitte füllen Sie alle
farblich markierten Pflichtfelder aus.</td></tr></table><br>';
}
else
{
// Alles ist in Ordnung
// Daten können gespeichert werden
// Seite neu laden und Hinweis anzeigen
header("Location: $script?check=TRUE");
|
Beispiel 3.1: form.php
Die nachfolgenden CSSDefinitionen
sollten selbsterklärend sein und können
nach Ihrem Belieben angepasst und erweitert werden. Die drei wichtigsten
Bereiche in dieser Datei sind:
- inputField Die Definition der Formularelemente im Grundzustand
- errorField Die Definition der Formularelemente im Fehlerfall
- errorTable Zur Anzeige des Hinweistextes – einmal im Fehlerfall und das
andere Mal bei erfolgreichem Speichern der Daten
Inhalt der Datei formStyle.css
01:
02:
03:
04:
05:
06:
07:
08:
09:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
|
body{
font-family: Verdana,Arial,sans-serif;
FONT-SIZE: 9px;
background-color: #ffffff;
}
.table {
font-family: Verdana,Arial,sans-serif;
FONT-SIZE: 9px;
background-color: #ffffff;
}
.inputField
{
BORDER-RIGHT: #7f7f7f 1px solid;
BORDER-TOP: #7f7f7f 1px solid;
BORDER-LEFT: #7f7f7f 1px solid;
BORDER-BOTTOM: #7f7f7f 1px solid;
FONT-SIZE: 9px;
WIDTH: 100px;
}
.errorField
{
BORDER-RIGHT: #9F0004 1px solid;
BORDER-TOP: #9F0004 1px solid;
BORDER-LEFT: #9F0004 1px solid;
BORDER-BOTTOM: #9F0004 1px solid;
FONT-SIZE: 9px;
WIDTH: 100px;
background-color: #FFFFCC;
}
.errorTable
{
BORDER-RIGHT: #9F0004 1px solid;
BORDER-TOP: #9F0004 1px solid;
BORDER-LEFT: #9F0004 1px solid;
BORDER-BOTTOM: #9F0004 1px solid;
FONT-SIZE: 9px;
background-color: #E2E1E1;
}
.headlineweiss
{
background-color: #9F0004;
color: #FFFFFF;
}
.Jahresabo
{
FONT-SIZE: 14px;
font-weight:bold;
}
.button
{
FONT-SIZE: 10px;
BORDER-RIGHT: #000000 1px solid;
BORDER-TOP: #000000 1px solid;
BORDER-LEFT: #000000 1px solid;
BORDER-BOTTOM: #000000 1px solid
}
|
Beispiel 3.2: formStyle.css
Das nachfolgende Formular sollte ebenfalls selbsterklärend sein. Es gibt hier
nichts Besonderes zu beachten. Sie können das Formular wiederum nach Ihren
Wünschen anpassen und erweitern.
Die Tabelle (93) für den Hinweistext steht bereits in einer Variablen bereit
und kann dann an dieser Stelle (93) ausgegeben werden. Weiterhin wird bei
jedem Formularelement der entsprechende Wert gesetzt: zum einen die CSS-Definition
und zum anderen das eventuelle Hinweisbild.
076:
077:
078:
079:
080:
081:
082:
083:
084:
085:
086:
087:
088:
089:
090:
091:
092:
093:
094:
095:
096:
097:
098:
099:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115
:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
| </head>
<body>
<FORM action="<?PHP echo $script; ?>" method=post>
<TABLE width="420" border=0 align="center" cellPadding=0 cellSpacing=0>
<TR>
<TD bgcolor="#000000" ><IMG height=1 src="transparent.gif" width=1></TD>
</TR>
<TR>
<TD height=2></TD>
</TR>
<TR>
<TD height=18 class=headlineweiss>
<div align="center"><strong>SELFPHP - Die PHP Kochzeitung</strong></div>
</TD>
</TR>
</table>
<!-- Formular Anfang -->
<TABLE width="420" align="center" border="0" class="table">
<TR>
<TD colSpan=4>
<div align="justify"><br>
Ja, senden Sie mir monatlich die erscheinende Online-Fachzeitung
SELFPHP - DIE PHP KOCHZEITUNG ab der nächsterreichbaren Ausgabe
kostenlos an meine Emailadresse. Ich habe jederzeit die Möglichkeit
die kostenlose Online-Fachzeitung wieder abzubestellen. Hierfür genügt
eine formlose Kündigung per Email an die Adresse zeitung@selfphp.de<br><br></div>
</TD>
</TR>
<TR>
<TD colSpan=4><?PHP echo $errorMessage; ?></TD>
</TR>
<TR>
<TD align=center colSpan=4></TD>
</TR>
<TR>
<TH align=left>Firma:</TH>
<TD><INPUT class="inputField" size="60" name="company"
value="<?PHP echo $_POST['company']; ?>"></TD>
<TH align=left>Abteilung:</TH>
<TD><INPUT class="inputField" size="60" name="company2"
value="<?PHP echo $_POST['company2']; ?>"></TD>
</TR>
<TR>
<TH align=left><?PHP echo $errorPicture['gender']; ?>Anrede:</TH>
<TD colSpan=3>
<SELECT size="1" name="gender" class="<?PHP echo $errorClass['gender']; ?>">
<OPTION value="" <?PHP if(empty($_POST['gender'])) echo 'selected'; ?>
>Bitte auswählen</OPTION>
<OPTION value="3" <?PHP if($_POST['gender'] == "3") echo 'selected'; ?>>Firma</OPTION>
<OPTION value="2" <?PHP if($_POST['gender'] == "2") echo 'selected'; ?>>Frau</OPTION>
<OPTION value="1" <?PHP if($_POST['gender'] == "1") echo 'selected'; ?>>Herr</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TH align=left><?PHP echo $errorPicture['firstname']; ?>Vorname:*</TH>
<TD><INPUT class="<?PHP echo $errorClass['firstname']; ?>" name="firstname"
value="<?PHP echo $_POST['firstname']; ?>"></TD>
<TH align=left><?PHP echo $errorPicture['lastname']; ?>Nachname:*</TH>
<TD><INPUT class="<?PHP echo $errorClass['lastname']; ?>" name="lastname"
value="<?PHP echo $_POST['lastname']; ?>"></TD>
</TR>
<TR>
<TH align=left><?PHP echo $errorPicture['telefone']; ?>Telefon:*</TH>
<TD><INPUT class="<?PHP echo $errorClass['telefone']; ?>" name="telefone"
value="<?PHP echo $_POST['telefone']; ?>"></TD>
<TH align=left>Fax:</TH>
<TD><INPUT class="inputField" name="faximile"
value="<?PHP echo $_POST['faximile']; ?>"></TD>
</TR>
<TR>
<TH align=left>Mobil:</TH>
<TD><INPUT class="inputField" name="mobilephone"
value="<?PHP echo $_POST['mobilephone']; ?>"></TD>
<TH align=left><?PHP echo $errorPicture['email']; ?>Email:*</TH>
<TD><INPUT class="<?PHP echo $errorClass['email']; ?>" name="email"
value="<?PHP echo $_POST['email']; ?>"></TD>
</TR>
<TR>
<TD align=center colSpan=4><HR></TD>
</TR>
<TR>
<TD align=right colSpan=4>
<INPUT name="submit" type="submit" value="Absenden" class="button">
</TD>
</TR>
</TABLE> |
Beispiel 3.3: form.php
Dieses Skript aus dem SELFPHP KOCHBUCH wurde von SELFPHP unter dem "Tarif Mc500" von McAc.net-Webhosting erfolgreich ausgeführt und getestet!
Auf der Übersichtseite unter "McAc.net – Webhosting zu diesem Buch" finden Sie weitere Informationen zu dem Webhostingpaket, dass durch SELFPHP getestet wurde.
|
SELFPHP
SELFPHP OHG, info@selfphp.de, Impressum, Kontakt