HTML5 view helpers [HTML5 Support]

Zend Framework provides view helpers for rendering all the form elements described in the previous section. The formElement() view helper can be used to render any kind of input dynamically based on the input type, however it is not the suggested practice.

The following table gives you the list of standard HTML5 helpers available for the HTML5 input elements:

Input type         Helper                                                                             Helper function

datetime   Zend\Form\View\Helper\ FormDateTime

formDateTime()

datetime- local

   Zend\Form\View\Helper\ FormDateTimeLocal

formDateTimeLocal()

time       Zend\Form\View\Helper\FormTime    formTime() date           Zend\Form\View\Helper\FormDate    formDate() week          Zend\Form\View\Helper\FormWeek    formWeek() month           Zend\Form\View\Helper\FormMonth   formMonth() email          Zend\Form\View\Helper\FormEmail   formEmail() url           Zend\Form\View\Helper\FormUrl     formUrl() number          Zend\Form\View\Helper\FormNumber  formNumber() range           Zend\Form\View\Helper\FormRange   formRange() color          Zend\Form\View\Helper\FormColor   formColor()

Apart from the standard list of view helpers, Zend Framework also provides helpers for the tel and search input types; these input types are an extension of the text input, but certain browsers (especially mobile browsers) support stylized input options in both these elements.

The following table gives you the list of additional HTML5 helpers available for the HTML5 input elements:

Input type	Helper	Helper function
tel search	Zend\Form\View\Helper\FormTel Zend\Form\View\Helper\FormSearch	formTel() formSearch()

In this task we will render all the form elements that we created in the previous task. We will make use of ZF's HTML5 view helpers to render these elements. Perform the following steps:

1.       Create a simple view that can be used to render the form.

2.       Make use of view helpers to render various form elements using the following code:

$this->formDateTime($form->get('element-date-time'));

$this->formDateTimeLocal($form->get('element-date-time-local'));

$this->formTime($form->get('element-time')); 

$this->formDate($form->get('element-date'));

$this->formWeek($form->get('element-week'));

$this->formMonth($form->get('element-month'));

$this->formEmail($form->get('element-email'));

$this->formUrl($form->get('element-url'));

$this->formNumber($form->get('element-number'));

$this->formRange($form->get('element-range'));

$this->formColor($form->get('element-color'));

3.       Test the form in an HTML5-compatible browser such as Opera 12. You should be able to see a form like the one shown in the following screenshot:

4.       Now, test the same form in an HTML5 non-compatible browser such as IE 9. You should be able to see a form like the one shown in the following screenshot. You can see that the unsupported input elements are replaced with textboxes:

What just happened?

We have created our first HTML5 form using ZF2 form elements. As of now, Opera 12 offers the best support for HTML5; other browsers such as Chrome and Safari are also good in terms of support. So, if you are testing your HTML5 forms, make sure that you are testing them in a browser that is compatible, such as Opera 12.