Zend HTML5 Form-Elementtypen

Question

Gibt es einen einfachen Weg, um HTML5-Formularelemente in ein Zend-Formular zu integrieren? Das createElement('tel','phone'); funktioniert einfach nicht, da Zend anscheinend noch keine Unterstützung für HTML5-Formularelemente bietet...man kann auch das Typ-Attribut nicht nachträglich überschreiben, nachdem es erstellt wurde.

Zum Beispiel benötige ich input type="tel/email/date/number" usw. in meinem Zend-Formular.

Answer 1

Kein Problem, ich habe diesen Artikel gefunden: http://www.enrise.com/2010/12/html5-zend-framework-form-elements/. Ich musste einfach seinen Code in meine MVC-Architektur kopieren und jetzt funktioniert es. Ich musste jedoch zum Beispiel $this->setAttrib('type','number') in Number.php hinzufügen, da die Option nicht hinzugefügt wird, es sei denn, sie ist im Controller festgelegt, was ein bisschen dumm ist, weil ich ein neues Glitch_Form_Element_Text_Number oder so ähnlich erstellen wollte o_O.

Answer 2

Benno,

Hier ist, was ich gemacht habe, um Glitch zum Laufen zu bringen: (Zend Framework 1.11)

in meiner Controller init() Funktion

//someController erweitert Zend_Controller_Action

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

Dann habe ich einfach den Typ bei der Elementerstellung überschrieben mit attrib('type','email')

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

     return $element;
}

Ohne die Ansichtshelfer festzulegen, ändert sich die Eingabe zu Text.

Danke!

Answer 3

Ich habe einen Artikel erstellt, der zeigt, wie man die Enrise HTML5-Formularelemente am besten verwendet, wobei betont wird, dass Sie das HTML5-Doctype angeben müssen.

Answer 4

Hier ist, was ich gemacht habe, um XML5-Elemente zu lösen.

Zuerst habe ich ein benutzerdefiniertes Formularelement erstellt unter: library/Custom/Form/Element/Html5.php

`

Dann habe ich einen benutzerdefinierten Ansichtshelfer erstellt unter: library/Custom/View/Helper/FormHtml5.php

    _getInfo($name, $value, $attribs);
            extract($info); // name, value, attribs, options, listsep, disable

            // Element erstellen
            $disabled = '';
            if ($disable) {
                // deaktiviert
                $disabled = ' disabled="disabled"';
            }

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

            $xhtml = '_htmlAttribs($attribs)
                    . $endTag;

            return $xhtml;
        }
    }

Dann habe ich dies im Formular hinzugefügt:

    class Application_Form_UserBasic extends Zend_Form
    {

        public function init()
        {
             // Dadurch wird ZF mitgeteilt, nach benutzerdefinierten Helfern in Ihrer benutzerdefinierten Bibliothek zu suchen
             $view = $this->getView();
             $view->addHelperPath(APPLICATION_PATH.'/../library/Custom/View/Helper/', 'Custom_View_Helper');

             /* Einige andere Codes */

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

             /* Ihre anderen Elemente */

             $this->addElements(array(
                  $email, /* Ihre anderen Elemente */
             ));
        }
    }

Vergessen Sie nicht, diese Zeile zu Ihrer application.ini-Datei hinzuzufügen, falls Sie dies noch nicht getan haben:

    autoloaderNamespaces[] = "Custom_"

Ich hoffe, es hilft jemandem.

`

Answer 5

Da es keine "Out-of-the-box"-Lösung gibt, habe ich es selbst geschrieben und ein Composer-Paket für eine einfache Verteilung erstellt. Wenn Sie Composer verwenden, können Sie es unter https://github.com/Alez/html5input verwenden.

1. Geben Sie im Konsolenfenster ein composer require alez/html5input
2. Erstellen Sie in Ihrer Formularklasse einfach eine Instanz von Html5Input_Element_AnyType mit dem Attribut "type" oder setzen Sie das Attribut "type" auf das, was Sie möchten, mit php $formElement->setAttrib('type', 'email'). Und das ist der einzige Unterschied zu Zend_Form_Element_Text, Sie können es wie ein einfaches Textelement behandeln.

Beispielcode:

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

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