Zend Framework HTML5 Form Elements

By default, Zend Framework 1.11 doesn’t have any native HTML5 form elements, but with some help from Enrise you can use their HTML5 Form Elements. I won’t go over the intricacies of creating custom forms and elements, but I will quickly show how to use the Glitch_Form_Element objects in a useful manner.

One of the neat things about the Glitch HTML5 elements is that they auto-detect the doctype being used in your Zend Framework application and will switch how they render to HTML. For example, if your doctype is set to ‘HTML5′ the Glitch_Form_Element_Text_Email object will render as an HTML5 email input and look like:
[sourcecode language=”html”]

[/sourcecode]
However, if your doctype is set to something else, it will render it as a standard text input like so
[sourcecode language=”html”]

[/sourcecode]
Pretty slick, eh? The best part is, the functionality is already built in. All you have to do is make sure you are setting your doctype.
I set mine in my Bootstrap.php file like so:
[sourcecode language=”php”]
protected function _initView()
{
// create view here if you need to change default options, but front
// controller will create view automatically.
$documentType = new Zend_View_Helper_Doctype();
$documentType->doctype($this->_config->resources->view->doctype);
}
[/sourcecode]
My application.ini config file has the default configuration block:

Finally, my form class looks just about like any other Zend_Form:
[sourcecode language=”php”]
class Ashurex_Form_Admin_AddUser extends Zend_Form
{
public function init()
{
$this->setName(‘add_user_form’);
$this->setMethod(‘post’);

$username = new Zend_Form_Element_Text(‘username’);
$username->setFilters(
array(
new Zend_Filter_StringTrim(),
new Zend_Filter_StringToLower(),
));
$username->setValidators(
array(
new Zend_Validate_Alnum(),
new Zend_Validate_StringLength(array(‘min’ => 6,’max’ => 64)),
));
$username->setRequired(true);
$username->setLabel(‘Username’);

$firstname = new Zend_Form_Element_Text(‘first_name’);
$firstname->setLabel(‘First Name’);
$firstname->setRequired(true);
$firstname->setFilters(
array(
new Zend_Filter_StringTrim(),
));
$firstname->setValidators(
array(
new Ashurex_Validate_Text_PersonName(),
new Zend_Validate_StringLength(array(‘min’ => 1,’max’ => 64)),
));

$lastname = new Zend_Form_Element_Text(‘last_name’);
$lastname->setLabel(‘Last Name’);
$lastname->setRequired(true);
$lastname->setFilters(
array(
new Zend_Filter_StringTrim(),
));
$lastname->setValidators(
array(
new Ashurex_Validate_Text_PersonName(),
new Zend_Validate_StringLength(array(‘min’ => 1,’max’ => 64)),
));

$email = new Glitch_Form_Element_Text_Email(‘email’);
$email->setLabel(‘Email’);
$email->setRequired(true);
$email->setFilters(
array(
new Zend_Filter_StringTrim(),
new Zend_Filter_StringToLower(),
));

$submit = new Zend_Form_Element_Submit(‘submit’);
$submit->setRequired(false);
$submit->setIgnore(true);
$submit->setLabel(‘Save’);

$cancel = new Zend_Form_Element_Submit(‘cancel’);
$cancel->setRequired(false);
$cancel->setIgnore(true);
$cancel->setLabel(‘Cancel’);

$this->addElements(array($username,$email,$firstname,$lastname,$submit, $cancel));
}
}
[/sourcecode]


Comments are closed.