Zend HTML5 Form element types

Question

Is there any easy way to get HTML5 Form elements into a Zend Form? createElement('tel','phone'); just doesn't work because zend doesn't support html5 form elements yet it seems... you can't override the type attribute either after it's been created.

E.G. I need input type="tel/email/date/number" etc on my zend form.

Answer 1

Benno,

Here is what I did to get Glitch to work: (Zend Framework 1.11)

in my Controller init() function

//someController extends Zend_Controller_Action

public function init(){
    $this->view->addHelperPath('Glitch/View/Helper', 'Glitch_View_Helper_');
}

Then in my element creation, I simply override the type with attrib('type','email')

public function getEmailField(){
     $element = new Zend_Form_Element_Text('email');
     $element->setLabel('Email');
     $element->setAttrib("type", "email");
     $element->setRequired();

     return $element;
}

Without setting the view helpers, the input changes to Text.

Thanks!

Answer 2

Nevermind, I found this article: http://www.enrise.com/2010/12/html5-zend-framework-form-elements/. I just had to copy his code into my MVC architecture and it works now. Except I had to put $this->setAttrib('type','number') for example in Number.php, because it doesn't add the option unless its set in the controller, which is a bit stupid because I was creating a new Glitch_Form_Element_Text_Number or whatever o_O.

Answer 3

I've created a writeup that shows how to best use the Enrise HTML5 form elements, reiterating the fact that you need specify the HTML5 doctype.

Answer 4

Since there's no "out of box" solution, i wrote it my self and made a composer package for easy distribution. If you use composer, you can use it https://github.com/Alez/html5input

1. type in console composer require alez/html5input
2. in your form class just create an instance Html5Input_Element_AnyType with "type" attribute or set it "type" attribute to whatever you want with php $formElement->setAttrib('type', 'email'). And that's the only difference between it and Zend_Form_Element_Text, you can treat it as simple text element.

Example code:

class My_Form extends Zend_Form
{
    public function init()
    {
        $email = new Html5Input_Element_AnyType('email', array(
            'type' => 'email',
        ));

        $this->addElement($email);
    }
}

Answer 5

Here is what I did to solve for XML5 elements.

First I created a custom form element on: library/Custom/Form/Element/Html5.php

    <?php

    /** Zend_Form_Element_Xhtml */
    require_once 'Zend/Form/Element/Xhtml.php';


    class Custom_Form_Element_Html5 extends Zend_Form_Element_Xhtml
    {
        public $helper = 'formHtml5';
    }

Then I created a custom view helper on: library/Custom/View/Helper/FormHtml5.php

    <?php


    /**
    * Abstract class for extension
    */
    require_once 'Zend/View/Helper/FormElement.php';


    /**
    * Helper to generate an "Html5" element
    *
    */
    class Custom_View_Helper_FormHtml5 extends Zend_View_Helper_FormElement
    {

        public function formHtml5($name, $value = null, $attribs = null)
        {
            $info = $this->_getInfo($name, $value, $attribs);
            extract($info); // name, value, attribs, options, listsep, disable

            // build the element
            $disabled = '';
            if ($disable) {
                // disabled
                $disabled = ' disabled="disabled"';
            }

            // XHTML or HTML end tag?
            $endTag = ' />';
            if (($this->view instanceof Zend_View_Abstract) && !$this->view->doctype()->isXhtml()) {
                $endTag= '>';
            }

            $xhtml = '<input'
                    . ' type="' . (($attribs['type'])?($this->view->escape($attribs['type'])):'text') . '"'
                    . ' name="' . $this->view->escape($name) . '"'
                    . ' id="' . $this->view->escape($id) . '"'
                    . ' value="' . $this->view->escape($value) . '"'
                    . $disabled
                    . $this->_htmlAttribs($attribs)
                    . $endTag;

            return $xhtml;
        }
    }

Then in the Form I added this:

    class Application_Form_UserBasic extends Zend_Form
    {

        public function init()
        {
             // this will tell zf to look for custom helpers on your custom library
             $view = $this->getView();
             $view->addHelperPath(APPLICATION_PATH.'/../library/Custom/View/Helper/', 'Custom_View_Helper');

             /* Some other code */

             $email      = new Custom_Form_Element_Html5('email');
             $email->setAttribs(array( 'type' => 'email'));

             /* Your other elements*/

             $this->addElements(array(
                  $email, /* your other elements */
             ));
        }
    }

Do not forget to add this line to your application.ini file in case you have not done so:

    autoloaderNamespaces[] = "Custom_"

I hope it helps somebody.