Zend Html5 Form Element Types

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...

Solution 1:

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.

Solution 2:

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

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

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

publicfunctiongetEmailField(){
     $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!

Solution 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.

Solution 4:

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';


    classCustom_Form_Element_Html5extendsZend_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
    *
    */classCustom_View_Helper_FormHtml5extendsZend_View_Helper_FormElement{

        publicfunctionformHtml5($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:

classApplication_Form_UserBasicextendsZend_Form{

        publicfunctioninit()
        {
             // 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.

Solution 5:

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:

classMy_FormextendsZend_Form{
    publicfunctioninit()
    {
        $email = new Html5Input_Element_AnyType('email', array(
            'type' => 'email',
        ));

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