Verarbeitung von Formularen
Die einfachste Variante eines Formulars besteht aus einer HTML-Seite und einer PHP-Anwendung auf dem Server. Diese Kombination wäre allerdings eine Einbahnstraße: Ein HTML-Formular kann Daten an das PHP-Script senden, aber keine Informationen vom PHP-Script entgegennehmen.
Ohne besondere Vorkehrungen leitet das Submit des Formulars den Nutzer auf das PHP-Script auf dem Server, das die Eingaben prüft und Fehler ausgibt. Bei Eingabefehlern müsste der Anwender die HTML-Seite erneut aufrufen, alle Felder noch einmal ausfüllen und das Formular wieder absenden – ein unzumutbares Hin- und Her.
Formular-Techniken
Über die Zeit wurden Techniken entwickelt, die das Hin- und Her zwischen HTML-Seite und Anwendung ausschalten:
- Das PHP-Script erzeugt das HTML mit dem Formular und kann beim Absenden der Daten Korrekturen bzw. das Resultat direkt in die Seite einfügen (»Affenformular«).
- AJAX: Javascript übernimmt die Kommunikation zwischen HTML-Seite und serverseitiger Anwendung mit dem XMLHttpRequest.
- Die Ausgabe der PHP-Anwendung wird in ein iframe-Element in der HTML-Seite gelenkt – einfacher Start für Einsteiger.
Datenaustausch zwischen HTML und PHP
Die einfachste Technik, die Informationen aus einem serverseitigem Script auf die HTML-Seite zu lenken, ist ein iframe in der HTML-Seite – ein Fenster für Ausgaben der Server-Anwendung.
Dafür braucht das form-Tag das target-Attribut.
Anwendung auf dem Server Ziel der Ausgabe
der Anwendung
+ +
| |
<form action="myform.php" method="post" target="myiframe">
</form>
<iframe name="myiframe" src="myform.php"></iframe>
|
+
Verbindung zur
Anwendung
Das Beispiel eines HTML-Formulars hat alle Arten von Eingabefeldern – sehen wir einmal von speziellen input-Typen wie type="password" und type="number" usw. ab. Aus Sicht der Anwendung – dem PHP-Programm auf dem Server – zählen nur zwei Attribute der Eingabefelder: name und value.
<input type="text" name="mytext">
Das value-Attribut muss nicht deklariert werden – es entsteht automatisch durch die Eingabe des Benutzers.
<input type="radio" name="mycolor" value="Grün"> Grün <input type="radio" name="mycolor" value="Blau"> Blau <input type="radio" name="mycolor" value="Gelb"> Gelb
Bei type="radio" sind die value-Attribute vorbelegt. Das Formular wird beim Absenden nur einen Wert übertragen: die Wahl des Nutzers.
input type="checkbox" überträgt nur dann das name/value-Paar, wenn die Checkbox markiert ist.
Die Mini-PHP-Anwendung in diesem Beispiel wirft die Eingaben einfach als Text zurück.
<?php
if (isset($_POST["mytext"]) && !empty($_POST["mytext"] )) {
echo "<pre>"; print_r($_REQUEST); echo "</pre>";
echo "<pre>"; print_r($_FILES); echo "</pre>";
}
?>
Anstelle des schlichten Echos der Benutzereingaben kann die PHP-Anwendung Fehlermeldungen oder Hinweise zurückgeben.
Die PHP-Anwendung auf dem Server
Mit der Anwendung auf dem Server stoßen wir auf eine Grenze: Webseiten mit HTML, CSS und Javascript können auf dem eigenen Rechner getestet werden. Für die PHP-Anwendung wird ein Webserver benötigt. Auf dem eigenen Rechner lassen sich serverseitige Anwendungen wie PHP-Scripte nur testen, wenn auf dem PC z.B. XAMPP installiert wird. XAMPP ist eine vollständige Testumgebung für Web-Applikationen mit einem Apache-Server, PHP und MySQL-Datenbank. Für den Mac gibt es MAMP, der Mac bringt allerdings auch einen Apache-Server von Haus aus mit, aber kein PHP. Die MySQL-Datenbank muss auch noch installiert werden.
Auf jeden Fall aber ist das PHP-Programm für dieses Beispiel ausgesprochen einfach und besteht aus »normalem« HTML und wenigen Zeilen PHP. Trotz der vielen HTML-Tags muss die Datei die Endung .php haben.
PHP kann direkt mit HTML benutzt werden. Die PHP-Anweisungen stehen in <?php und ?>-Tags.
<!DOCTYPE html>
<html>
<head>
<title>MyformApp</title>
…
</head>
<body>
<?php
if (isset($_POST["mytext"]) && !empty($_POST["mytext"] )) {
echo "<pre>"; print_r($_REQUEST); echo "</pre>";
echo "<pre>"; print_r($_FILES); echo "</pre>";
}
?>
</body>
</html>
Die Anwendung gibt die Daten, die sie nach dem Absenden des Formulars empfängt, mit einer echo-Anweisung aus – nicht mehr. Diese Ausgabe landet dann im iframe unterhalb des Beispiel-Formular.
$_REQUEST ist eine PHP-Datenstruktur, die sowohl Daten aus einem Formular mit method="get" als auch method="post" aufnimmt.
Informationen über Dateien aus einem File-Upload landen in einer Datenstruktur $_FILES.
Formulare mit PHP-Seiten
Das iframe-Tag für die Ausgabe der PHP-Anwendung ist für einen einfachen Einstieg und erste Tests gedacht, aber keine optimale Lösung für komplexe Formulare. Formular-Eingaben müssen validiert werden und der Benutzer erwartet eine schnelle Rückmeldung bei falschen oder fehlenden Eingaben – am besten direkt beim betreffenden Eingabefeld.
Da eine PHP-Anwendung aus HTML-Tags und PHP bestehen darf, kann das komplette HTML-Markup des Formulars direkt in die PHP-Datei geschrieben werden (kann man auch anders herum sehen: PHP-Anweisungen im HTML-Markup).
<!DOCTYPE html> <html> <head> <title>MyformApp</title> </head> <body> <?php // Wenn der Benutzer das Formular abgeschickt hat if (!empty($_POST)) { } ?> <form action="<?php echo $_SERVER['SCRIPT_NAME']; ?>" method="post"> <input type="text" name="textfeld" value="<?php echo isset($_POST['textfeld']) ? htmlspecialchars($_POST['textfeld']) : ''; ?>" /> </form> </body> </html>
Die fehlende Trennung zwischen PHP-Script und HTML-Markup ist schwer nachvollziehbar. Auch wenn das Schema für sich einfach und logisch ist, ist die Mischung aus PHP und HTML schnell ein dornenreiches Dickicht mit vielen Verstecken für Fehler und Sicherheitslücken.
Der Eintopf aus PHP und HTML (charmant als »Affenformular« bezeichnet) ist die Basis für Formulare und serverseitige Anwendungen. Nur so war es früher möglich, die HTML-Seite (das PHP-Script erzeugt eine HTML-Seite!) mit Daten und Rückgabewerten aus der Anwendung zu versorgen.
HTML-Formulare mit Javascript und PHP (AJAX)
Damit die Webseite mit dem Formular eine einfache HTML-Datei ohne PHP-Einschlüsse bleibt, schlägt Javascript die Brücke zwischen dem Formular und der Anwendung auf dem Server. Das ist AJAX (Asynchronous Javascript And XML) – die Technik hinter dem oft zitierten WEB2.
Javascript FormData ist noch wenig bekannt und wird von IE erst ab Version 10 unterstützt. Aber FormData macht die Kommunikation zwischen HTML und einer Anwendung auf dem Server einfacher und schneller als jQuery.
document.getElementById("myform").onsubmit = function(e) {
e.preventDefault();
var f = e.target,
formData = new FormData(f),
xhr = new XMLHttpRequest();
xhr.open("POST", f.action);
xhr.send(formData);
}
Formulare validieren
Dies alles ist nur die Spitze des Eisbergs. Die spartanische PHP-Anwendung führt keine weiteren Anweisungen durch.
Auf jeden Fall aber müssen alle Eingaben penibel geprüft werden, damit Cross-Site-Scripting, Injections und Spam so gut wie möglich ausgeschlossen werden. Die Eingaben des Benutzers müssen validiert werden.
Bei einem Kontaktformular würde die PHP-Anwendung die Eingaben des Benutzers in ein Email-Format umwandeln und die Email an den Empfänger senden. Eine Datenbank-Anwendung würde die Daten aufbereiten und Datensätze speichern.
