Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

Formvollendet (Teil 2)

HTML_QuickForm2 für Fortgeschrittene

Formvollendet (Teil 2)

Können wir mit HTML_QuickForm2 HTML5-Formulare erstellen? Was ist möglich, wo liegen die Grenzen? Im ersten Teil des Artikels hat Olaf Gleba die grundsätzliche Anwendung der PHP-Formular- Bibliothek HTML_QuickForm2 vorgestellt. Im zweiten Teil widmet er sich nun dem Einsatz der neuen HTML5-Input-Typen, Attribute und HTML5-Validierung.

Teil 1 stellt die grundsätzlichen Funktionen der Formular-Bibliothek HTML_QuickForm2 vor.

Wieviel HTML5 darf’s denn sein, bitt’ schön?

Entwickler von Formular-Bibliotheken wie HTML_QuickForm2 sind, seitdem die ersten Browser HTML5 zumindest teilweise unterstützen, nicht wirklich zu beneiden. War HTML früher ausschließlich eine Auszeichnungssprache, wurden mit HTML5 Elemente eingeführt, die interaktiv auf Benutzereingaben reagieren, wie bspw. Elemente des Typs input in Verbindung mit globalen Attributen. Durch Anwendung dieser neuen Input-Typen und Attribute ist heute schon – wenn auch sehr lückenhaft und/oder unterschiedlich in den Browsern implementiert – eine client-seitige Validierung von Formularinhalten ohne Javascript möglich.

Was grundsätzlich einen aus meiner Sicht richtigen Schritt bedeutet, HTML an die veränderten Realitäten im Web anzugleichen, bedeutet für Entwickler solcher Bibliotheken allerdings rauchende Köpfen. Konkurrieren die in der Bibliothek implementierten Mechanismen der Validierung doch ggf. mit denen, die durch die HTML5-API bereitgestellt werden.

HTML_QuickForm2 ist offiziell (noch) nicht HTML5-Ready. Weder die neuen Input-Typen noch andere, für Formulare relevante Elemente wie bspw. datalist sind zur Zeit in der API berücksichtigt. Beides steht allerdings schon, ebenso wie die Anpassung der client-seitigen Validierungsmechanismen, auf der To-Do Liste der Hauptentwickler. Im verlinkten Developer-Wiki-Eintrag kann sehr schön nachvollzogen werden, worin die Schwierigkeiten und Aufgaben bestehen, die Bibliothek und HTML5 konsistent zu verzahnen.

Aber auch jetzt können wir schon große Teile der HTML5-API in HTML_QuickForm2-Formularen nutzen und einsetzen. Außerdem lässt sich die Bibliothek – mit ein wenig Handarbeit – sogar um einige der neuen Input-Typen erweitern. Schauen wir uns also an, was schon jetzt geht.

Unbegrenzte Attribute

Wie im ersten Teil schon angedeutet, können wir für Formular-Elemente in HTML_QuickForm2 beliebige Attribute angeben. Wir erweiteren also das E-Mail-Input-Feld des Beispielformulars um das neue HTML5-Attribut placeholder und definieren zusätzlich ein eigenes data-* Attribut.

  1. <?php
  2. $email = $FORM->addElement('text', 'email',
  3.   array('id' => 'email', 'class' => 'form-input', 'placeholder' => 'Tragen Sie hier bitte Ihre E-Mail Adresse ein', 'data-whatsoever' => 'You have killed me'),
  4.   array('label' => 'Ihre E-Mail-Adresse')
  5. );
  6.  
  7. // Ausgabe:
  8. <input type="text" id="email" name="email" class="form-input" placeholder="Tragen Sie hier bitte Ihre E-Mail-Adresse ein" data-whatsoever="You have killed me" />
  9. ?>

In einem weiteren Beispiel, das losgelöst von unserem Beispielformular ist, legen wir ein Element vom Input-Typ text an, das eine Postleitzahl beinhalten soll. Hier setzen wir das Attribut autofocus, so dass der Cursor unmittelbar nach Laden der Seite in dieses Feld gesetzt wird und nutzen das Attribut pattern, um einen Wertebereich angeben können, in dessen Grenzen die Inhalte als valide angesehen werden. Entsprechend der Normierung einer deutschen Postleitzahl darf die Eingabe nur aus Zahlen bestehen und muss exakt 5 Zeichen beinhalten.

  1. <?php
  2. $email = $FORM->addElement('text', 'plz',
  3.   array('id' => 'plz', 'autofocus', 'pattern' => '[0-9]{5}'),
  4.   array('label' => 'PLZ')
  5. );
  6.  
  7. // Ausgabe:
  8. <input type="text" id="plz" name="plz" autofocus="autofocus" pattern="[0-9]{5}" />
  9. ?>

Wir können also auch jetzt schon bei den bisher bekannten Input-Typen viele der neuen HTML5-Attribute nutzen.

HTML5-Input-Typen anlegen

Das ist alles schon ganz nett und zeigt, dass HTML_QuickForm2 durch sein Konzept nicht in die Programmatik der Definition und Ausgabe von Elementen eingreift. Aber was ist mit den neuen HTML5-Input-Typen und Attributen wie required, die eine browser-gestützte Validierung ermöglichen? Hierzu müssen wir erst einmal in HTML_QuickForm2 die gewünschten Input-Typen anlegen. Zeit, die Ärmel hochzukrempeln…

Um HTML_QuickForm2 mit einigen der neuen HTML5-Input-Typen wie email, tel, url etc. bekannt zu machen, muss die Klassenbibliothek erweitert werden. Glücklicherweise ist dies durch ein wenig Copy&Paste und wenigen Anpassungen möglich und leicht zu bewerkstelligen, auch ohne PHP-Experte sein zu.

Innerhalb des Download-Ordners der Bibliothek findet wir einen Ordner mit dem Namen Element. In diesem liegen die Definitionsdateien für sämtliche Formularelemente. Wir kopieren die Datei InputText.php und benennen diese entsprechend der Namenskonventionen um. Soll die Datei bspw. das Input-Element email abbilden, wäre InputEmail.php die korrekte Namensgebung. Wir öffnen die kopierte Datei mit einem UTF-8-fähigen Texteditor. Uns interessieren hier einzig zwei Zeilen, die wir nun anpassen.

Bleiben wir beim eben genannten Beispiel und bearbeiten die Datei, so dass sie ein Input-Feld vom Typ email repräsentiert. Zuerst passen wir den Klassennamen an:

  1. <?php
  2. class HTML_QuickForm2_Element_InputText ...
  3. ?>

wird zu

  1. <?php
  2. class HTML_QuickForm2_Element_InputEmail ...
  3. ?>

Dann ändern wir den Wert des Attribut-Arrays von text zu email:

  1. <?php
  2. protected $attributes = array('type' => 'text');
  3. ?>

wird zu

  1. <?php
  2. protected $attributes = array('type' => 'email');
  3. ?>

Gleiche Procedere wiederholen wir – mit jeweils angepassten Angaben – für jedes neue HTML5-Formularelement, das in den Formularen genutzt werden soll. Damit haben wir die neuen Elemente angelegt (in der erweiterten Beispielvorlage sind die HTML5-Input-Typen abgebildet, die aktuell mit HTML_QuickForm2 problemlos genutzt werden können).

Als letzten Schritt müssen wir noch in einer übergeordneten Klasse der Bibliothek die neuen Elemente anmelden. Auf der Ebene, auf der auch der Ordner Element liegt, befindet sich eine Datei mit dem Namen Factory.php. Diese öffnen wir wieder im Texteditor unserer Wahl. Ab Zeile 71 finden wir ein Array, in dem sämtlich bekannte Elementtypen definiert sind. Wir kopieren einfach folgende Zeile:

  1. <?php
  2. 'text'        => array('HTML_QuickForm2_Element_InputText', null)
  3. ?>

fügen sie am Ende des Arrays an

  1. <?php
  2. ...
  3. 'textarea'    => array('HTML_QuickForm2_Element_Textarea', null),
  4. 'text'        => array('HTML_QuickForm2_Element_InputText', null)
  5. ?>

und ändern den kopierten Inhalt – analog zur Umbennung der Klasse – wie folgt in

  1. <?php
  2. 'email'       => array('HTML_QuickForm2_Element_InputEmail', null)
  3. ?>

Hinweis: Nach dem letzten Element eines Arrays wird kein Komma gesetzt!

Dieses wiederholen wir für jedes neu angelegte Element. Das war’s. Ab sofort können wir die neuen HTML5-Input-Elemente in unseren Formularen einsetzen. Bezogen auf unser Beispielformular sieht die Definition für unser E-Mail-Formularfeld nun wie folgt aus:

  1. <?php
  2. $email = $FORM->addElement('email', 'email',
  3.   array('id' => 'email', 'class' => 'form-input'),
  4.   array('label' => 'Ihre E-Mail-Adresse')
  5. );
  6. ?>

Geändert hat sich also nur das erste Attribut:

  1. <?php
  2. // Vorher
  3. $email = $FORM->addElement('text', ... );
  4.  
  5. // Nachher
  6. $email = $FORM->addElement('email', ... );
  7. ?>

Butter an die HTML5-Fische

Um die erwähnte Browser-Validierung zu testen, zeichnen wir nun das E-Mail-Element mit Hilfe des neuen HTML5-Attribut required als Pflichtfeld1 aus. Und weil wir schon mal dabei sind, setzen wir – als Ergänzung – das WAI-ARIA-Attribut aria-required.

  1. <?php
  2. $email = $FORM->addElement('email', 'email',
  3.   array('id' => 'email', 'class' => 'form-input', 'required', 'aria-required' => 'true'),
  4.   array('label' => 'Ihre E-Mail-Adresse')
  5. );
  6.  
  7. // Ausgabe:
  8. <input type="email" id="email" name="email" class="form-input"  required="required" aria-required="true" />
  9. ?>

Rufen wir das Formular in einem Browser auf, der diese Angaben und Elemente unterstützt, bekommt der Anwender – unabhängig von server- oder client-seitiger Validierung – eine Fehlermeldung angezeigt, sobald er auf den Absenden-Button geklickt hat und das Feld email nicht ausgefüllt wurde und/oder der Inhalt nicht der validen Syntax einer E-Mail-Adresse entspricht.

Da die HTML5-Validierung im Browser immer vor der server-seitigen Validierung erfolgt, hätten wir hier augenscheinlich ein (irgendwann mal) fast perfektes Gespann.

Leider trüben zwei Umstände die Freude. Zum einen ist die Gestaltung der Hinweise und/oder Fehlermeldungen der HTML5-Validierung browserabhängig und im Moment nur ungenügend anpassbar. So unterscheidet sich die Darstellung in den verschiedenen Browsern teilweise drastisch. Zum anderen findet die HTML5-Validierung erst nach dem Absenden des Formulars statt. Echtzeit-Validierung während der Eingabe, die einem der bekannten Konzepte folgt, bietet sie – da Javascript-unabhängig – nicht. Dies kann nur durch Verwendung einer Javascript-gestützten Validierung erreicht werden (s. auch Ressourcen)

Fazit

Dadurch, dass sich HTML_QuickForm2 auf die Generierung von Formularelementen konzentriert ohne strukturelle Vorgaben zu machen, ist es jetzt schon möglich – auch ohne offizielle Unterstützung – HTML5-Formulare zu erstellen. Allein schon durch die offene Architektur der Attributvergabe können wir schon einiges an HTML5-Funktionalität integrieren und nutzen.

Aus meiner Sicht macht die Kombination den Reiz aus. Generierung der Elemente und server-seitige Validierung durch HTML_QuickForm2, HTML5-Validierung und/oder Echtzeit-Validierung mit Hilfe von Javascript-Bibliotheken. Da wäre es: das für mich (zum jetzigen Stand) perfekte Team.

Ressourcen

HTML_QuickForm2

Crossbrowser Formular Validierung

Wissenswertes

Beispielvorlagen herunterladen

1 HTML_QuickForm2 gibt Attribute immer als Attribut/Wert Paarung aus. Die Beispielangabe 'required' führt ebenso wie die explizite Angabe 'required' => 'required' zum Ausgabe-Markup required="required", welches valides HTML5 Markup ist.

Kommentare

Thorben
am 01.06.2012 - 11:23

Klasse Artikel, diese required-Attribute sind wirklich recht praktisch. Was ich mich auch schon
in Teil 1 gefragt habe : wie siehts mit Spam aus ?
Es gibt ja jetzt Motion-Captcha, Quick Cache, Hyper Cache, hat sich denn dadurch was verbessert ?

Permanenter Link
Olaf Gleba

Olaf Gleba (Autor)
am 05.06.2012 - 00:44

Hallo Thorben,

wie und ob du die von dir genannten Methoden zur Spam-Vermeidung nutzt, ist unabhängig von der in dem Artikel vorgestellten HTML_QuickForm2, da nicht originäre Aufgabe einer Formular Bibliothek.

Permanenter Link

Willi
am 09.06.2012 - 08:09

Hallo Olaf,

Zum anderen findet die HTML5-Validierung erst nach dem Absenden des Formulars statt.

Ich denke es sollt heissen:
Zum anderen findet die HTML5-Validierung erst nach dem Absendeversuch des Formulars statt.

Oder senden die Browser ggf. ein nicht validiertes Form ab?

Permanenter Link
Olaf Gleba

Olaf Gleba (Autor)
am 10.06.2012 - 23:39

Hallo Willi,

nach dem Absenden des Formulars bezieht sich ja auf den Klick des Submit-Button. Von daher lässt sich trefflich darüber diskutieren, ob man das jetzt als "Versuch" definiert oder als ein tatsächliches "Absenden" des Formulars. Technisch gesehen ist es aus meiner Sicht eher Zweiteres.

Permanenter Link

Die Kommentare sind geschlossen.