Posts tagged with: enrise

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]