Teil von  SELFPHP
  +++ SELFPHP CronJob-Service :: Jetzt auch als Professional-Version verfügbar! +++

:: Anbieterverzeichnis ::

Globale Branchen

Informieren Sie sich über ausgewählte Unternehmen im Anbieterverzeichnis von SELFPHP  

 

:: SELFPHP Forum ::

Fragen rund um die Themen PHP? In über 120.000 Beiträgen finden Sie sicher die passende Antwort!  

 

:: Newsletter ::

Abonnieren Sie hier den kostenlosen SELFPHP Newsletter!

Vorname: 
Name:
E-Mail:
 
 

:: Qozido ::

Die Bilderverwaltung mit Logbuch für Taucher und Schnorchler.   

 
 
Pflichtfelder in Formularen bei Fehlern farbig hervorheben


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


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">&nbsp;';
        }
    
    }

}

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&auml;chsterreichbaren Ausgabe 
                kostenlos an meine Emailadresse. Ich habe jederzeit die M&ouml;glichkeit
                die kostenlose Online-Fachzeitung wieder abzubestellen. Hierfür gen&uuml;gt
                eine formlose K&uuml;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&auml;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.


 




:: Premium-Partner ::

Webhosting/Serverlösungen


Premium-Partner LeaseWeb Germany GmbH
Premium-Partner MECO Systemhaus GmbH & Co. KG
Premium-Partner PSW GROUP GmbH & Co. KG
Premium-Partner BPI-Systeme
Premium-Partner Pixel X
Premium-Partner
 

:: SELFPHP Sponsoren ::


DM Solutions
Microsoft Deutschland GmbH
Sedo - Bei uns wird PHP großgeschrieben
hostfactory.ch - OptimaNet Schweiz AG
ZEND - The PHP Company
Kaspersky Labs
HighText iBusiness
SELFPHP Sponsoren
 

Qozido


© 2001-2013 E-Mail SELFPHP OHG, info@selfphp.deImpressumKontakt