depage-forms: html5 Formulare leicht gemacht (Part I)

, von Frank Hellenkamp / Sebastian Reinhold

HTML Formulare: Leicht und schwer zugleich

HTML-Formulare sind leicht zu erstellen – aber sie wirklich gut und benutzerfreundlich zu machen, das ist keine einfache Aufgabe. 

Es gibt dabei eine Reihe von Dingen, die man immer wieder und wieder machen muss: 

  • Den HTML-Source für die Form schreiben
  • Die Stylesheets dafür festlegen
  • Die eingegeben Daten im Browser validieren (optional)
  • Die eigegebenen Daten auf dem Server validieren (niemals optional – das bitte nie vergessen!)
  • Und zusätzlich noch dafür sorgen, dass der Benutzer nicht mit dem Browser kämpfen muss: Beispielsweise bei unverständlichen Meldungen über das erneute Senden von Daten immer dann, wenn die Seite neu geladen wird oder der Benutzer den Vor- oder Zurück-Button benutzt.

Dies ist ein Teil der laufenden Reihe über depage-forms

Nicht mehr ständig kämpfen müssen!

Weil wir es satt waren immer wieder den gleichen Kampf zu führen, präsentieren wir heute: 

depage-forms – HTML5-Formulare einfach gemacht! 

 

Documentation

Fork us/Source-Code

depage-forms ist eine PHP Bibliothek um einfach und schnell HTML-Formulare zu erzeugen, die es einfacher für Entwickler aber auch einfacher für Benutzer macht. 

 

Sie ist Teil der nächsten Version von depage-cms, kann aber auch unabhängig als PHP Library benutzt werden. Indem sie HTML abstrahiert, verschiedene Browser-Flaws behebt (u.a. doppelte Form-Submissions) und die Validierung der Daten vereinfacht, ermöglicht sie auf einfache Weise verlässliche und validierte Daten von den Benutzern zu bekommen. 

 

Wir sind (bei weitem) nicht die ersten, die sich dieser Probleme annehmen. Für PHP gibt es beispielsweise Zend-Forms und Phorms. Aber wir denken, das wir einen eigenen und guten Weg gefunden haben, um uns diese Probleme vom Leib zu halten. 

Wie funktioniert das ganze nun?

Zuerst laden wir die Bibliothek und initialisieren eine Instanz der htmlform-Klasse. Fast alle Prozeduraufrufe erfolgen durch die htmlform-Klasse. Nur Fieldsets und Steps werden ebenfalls explizit vom Developer angesprochen. Dazu aber später noch mehr. 

<?php
require_once('path/to/htmlform.php');

$form = new depage\htmlform\htmlform('simpleForm');

Danach fügen wir unsere Input-Elemente und andere Formfelder zu unserem Formular hinzu. 

 

Man macht dies indem man die '"add" + Elementname'-Methode aufruft. Der erste Parameter ist dabei der Name des Elements, der auf jeden Fall eindeutig sein muss. Der zweite Parameter ist ein optionaler Array mit verschiedenen Optionen. Jede dieser Einstellungen ist optional und hat eine in dem meisten Fällen passende Standardeinstellung. 

 

Wenn beispielsweise kein Parameter "label" übergeben wird, dann wird der Input-Name als Label verwendet. Zu jedem Input kann man zudem eine "required"-Eigenschaft hinzufügen, so dass der Benutzer die Dateneingabe nur beenden kann, wenn er dieses Formfeld auch ausfüllt. 

$form->addText('username', array(
	'label' => 'User name', 
	'required' => true,
));
$form->addEmail('email', array(
	'label' => 'Email address',
));

Als nächstes kommt dann die "process"-Methode – Diese ist ein essentieller Teil der htmlform-Klasse. 

  • Sie validiert die eingegebenen Daten, wenn das Forumlar schon abgeschickt wurde.
  • Sie leitet den Browser zu der "Success"-Seite weiter, wenn alle eingegebenen Daten korrekt validiert werden konnten und wenn alle benötigten Formfelder (required) ausgefüllt wurden.
  • Sie speichert die eingegeben Daten in einer Session ab und leitet das Forumlar zu sich selbst weiter um das Problem der erneuten Sendung der Daten (resubmission) zu umgehen. D.h. das zunächst die Formulardaten über POST-Request gesendet werden und dann das Formular erneut über einen GET-Request angezeigt wird. Mehr Informationen hierzu: PRG-Pattern auf Wikipedia

 

(Hinweise: Man sollte sicher stellen, das die process-Methode vor jeglichem anderen Output ausgeführt wird, so dass sich die Form selbst weiterleiten kann.) 

$form->process();

Nachdem das Formular nun korrekt bearbeitet wurde, wissen wir ob alle eingegebenen Daten korrekt validiert werden konnten: 

  • Bei "korrekten" Daten, könne wir nun alles damit machen, was wir wollen. Hier geben wir die Daten einfach mit var_dump aus.
  • Die eingegebenen Daten werden so lange in einer Session abgespeichert, bis wir entweder die clear-Methode der htmlform aufrufen, oder bis die Session von selbst abgelaufen ist.
  • Wenn die Form noch leer ist, oder der Benutzer noch keine kompletten Daten eingegeben hat, dann können wir das Formular einfach mit "echo" ausgeben.
if ($form->validate()) {
    var_dump($form->getValues());

    $form->clearSession();
} else {
    echo ($form);
}

Live-Beispiel

Und hier das live-Beispiel: 

http://docs.depage.net/depage-forms/documentation/html/simple_8php-example.html 

Die nächsten Schritte

In den nächsten Posts über depage-forms werden wir uns dann den erweiterten Features der depage-forms zuwenden, wie beispielsweise: