preload preload


Design HTML5 Form in Zend Framework with Zend_Form

I was working on one of my client project which was based on Zend Framework. It is a complete modern Zend Framework application with HTML5 support and definitely, the forms were the integral part of this application. While developing the application, my intention was to try to use HTML5 conventions as much as possible with the Zend Framework and so I did for the forms also.

Zend Framework provides Zend_Form which allows you to create complex forms programatically. It uses the decorators then to render the form. Although sophisticated, it is also very much complex while working with Zend_Form to actually achieve the layout for your forms which you are willing to.

So here in this post, I am going to show you how I was able to create HTML5 login form in Zend Framework using Zend_Form.

We will be utilizing the builtin functions provided in Zend_Form to create the form elements and its html layout.

To start with, let us create a new Form class by extending Zend_Form class. I will name this class as MyHtml5LoginForm


<?php
class MyHtml5LoginForm extends Zend_Form {

}

Next we will write the initialization of form elements into Zend_Form init() method. The init() method of Zend_Form is the last function called by Zend_Form constructor.


public function init() {

}

Next, we are going to call three  functions to set the form name, method and action. They are setName, setMethod and setAction.

$this->setName('loginform')->setAction('/login/process')->setMethod('POST');

Now we will start creating the elements for the form. In Zend_Form, we can either use a single method to create an element at a time or we can use different functions to set the different attributes of form elements. Here we will use the single functions addElement and setDecorators to set all the attributes of an element, applying filters and validators, applying decorators at a time.

Our form class will create username text field, password text field, submit and reset button wrapped into section element of HTML5.

Following is the full code for creating HTML5 login form in Zend Framework using Zend_Form.


<?php
class MyHtml5LoginForm extends Zend_Form {
 public function init() {
 $this->setName('loginform')->setAction('/login/process')->setMethod('POST');

 // Username
 $this->addElement('text', 'username', array(
 'filters'    => array('StringTrim', 'StringToLower'),
 'validators' => array(
 'AlNum',
 array('StringLength', false, array(3, 20)),
 ),
 'required'   => true,
 'label'      => 'Username',
 ));
 $this->getElement('username')->setDecorators(array(
 'ViewHelper', 'Description', 'Errors',
 array(array('data' => 'HtmlTag'), array('tag' => 'span')),
 array('Label', array('tag' => 'span')),
 array(array('row' => 'HtmlTag'), array('tag' => 'p', 'class' => 'clear'))
 ));

 // Password
 $this->addElement('password', 'password', array(
 'filters'    => array('StringTrim'),
 'validators' => array(
 'Alnum',
 array('StringLength', false, array(6, 20)),
 ),
 'required'   => true,
 'label'      => 'Password',
 ));
 $this->getElement('password')->setDecorators(array(
 'ViewHelper', 'Description', 'Errors',
 array(array('data' => 'HtmlTag'), array('tag' => 'span')),
 array('Label', array('tag' => 'span')),
 array(array('row' => 'HtmlTag'), array('tag' => 'p', 'class' => 'clear'))
 ));

 // Login
 $this->addElement('submit', 'Login', array(
 'required' => false,
 'ignore'   => true
 ));
 $this->getElement('Login')->setDecorators(array(
 'ViewHelper', 'Description', 'Errors',
 array(array('data' => 'HtmlTag'), array('tag' => 'span')),
 ))->setAttrib('class', 'button')->removeDecorator('Label');

 // Reset
 $this->addElement('reset', 'Reset', array(
 'required' => false,
 'ignore'   => true
 ));
 $this->getElement('Reset')->setDecorators(array(
 'ViewHelper', 'Description', 'Errors',
 array(array('data' => 'HtmlTag'), array('tag' => 'span'))
 ))->setAttrib('class', 'button')->removeDecorator('Label');

 $this->addDisplayGroup(array('Reset', 'Login'), 'display');
 $this->getDisplayGroup('display')->setDecorators(array(
 'FormElements', array('HtmlTag',array('tag'=>'p', 'class' => 'clear'))
 ));

 $this->setDecorators(array('FormElements', array('HtmlTag', array('tag' => 'section')), 'Form'));
 return $this;
 }
}

For information on the different methods used in the above codebase, please refer to Zend Framework Zend_Form documentation.

Liked the content? Then why not share with your pals

  • Trackbacks

  • Trackback fromTutorial: Simple HTML5 Login Form
    Friday, 15 October, 2010

    [...] for this site and I have seen that most of the hits VoidWeb is getting for is due to my post “Design HTML5 Form in Zend Framework with Zend_Form“. Since that post was very specific to Zend Framework, I thought let me post about making a [...]

  • Leave a Reply

    * Required
    ** Your Email is never shared