How To Remove All DtDdWrappers and Labels on Zend Form Elements

Question

I know I can remove the extra stuff from each element individually like so

$button ->removeDecorator('DtDdWrapper')
        ->removeDecorator('HtmlTag')
     ->removeDecorator('Label');

I was wondering if I can achieve the same for all my elements in a zend form?
And how does one remove the dl wrapping the form?

Answer 1

Markus, here is a solution that I use that seems to work well, hopefully it will be suitable for you.

First, in order to render the form with no <dl> tag, we need to set the decorators on form object itself. From inside a class extending Zend_Form, you would call Zend_Form->setDecorators() passing an array of form decorators.

From the reference guide:

The default decorators for Zend_Form are FormElements, HtmlTag (wraps in a definition list), and Form; the equivalent code for creating them is as follows:

  $form->setDecorators(array(
      'FormElements',
      array('HtmlTag', array('tag' => 'dl')),
      'Form'
  ));

To wrap the form in something other than a dl, we use the above decorators but change the dl to whatever tag you use, I typically use a div of class form which we will see later.

Next, the elements need to be dealt with. Zend_Form elements have different decorators for different types of elements. The following groups of element types each have their own distinct set of decorators: [Submit & Button], [Captcha], [File], [Image], and [Radio*]. The decorator for radio is very similar to standard elements except that it does not specify the for attribute inside the label.

All other form elements, text, password, select, checkbox, etc use the same set of default decorators.

To remove the dd/dt tags from an individual form element we would need to apply our own set of decorators to it. Here is an example that does not use dd/dt tags:

array(
    'ViewHelper',
    'Errors',
    array('Description', array('tag' => 'p', 'class' => 'description')),
    array('HtmlTag',     array('class' => 'form-div')),
    array('Label',       array('class' => 'form-label'))
);

This will wrap each form element in a div tag with the class form-div. The problem is, you have to apply this set of decorators to EVERY element that you don't want to be wrapped in the dd/dt tags which can be a bit problematic.

To solve this issue, I create a class that extends from Zend_Form and give it some default behavior and decorators that are different from the default decorators for Zend_Form.

While we can't quite have Zend_Form automatically assign the correct decorators to specific element types (you can assign them to specific element names), we can set a default, and give ourselves easy access to the decorators from one place, so if they need to change, they can be easily changed for all forms.

Here is the base class:

<?php

class Application_Form_Base extends Zend_Form
{
    /** @var array Decorators to use for standard form elements */
    // these will be applied to our text, password, select, checkbox and radio elements by default
    public $elementDecorators = array(
        'ViewHelper',
        'Errors',
        array('Description', array('tag' => 'p', 'class' => 'description')),
        array('HtmlTag',     array('class' => 'form-div')),
        array('Label',       array('class' => 'form-label', 'requiredSuffix' => '*'))
    );

    /** @var array Decorators for File input elements */
    // these will be used for file elements
    public $fileDecorators = array(
        'File',
        'Errors',
        array('Description', array('tag' => 'p', 'class' => 'description')),
        array('HtmlTag',     array('class' => 'form-div')),
        array('Label',       array('class' => 'form-label', 'requiredSuffix' => '*'))
    );

    /** @var array Decorator to use for standard for elements except do not wrap in HtmlTag */
    // this array gets set up in the constructor 
    // this can be used if you do not want an element wrapped in a div tag at all
    public $elementDecoratorsNoTag = array();

    /** @var array Decorators for button and submit elements */
    // decorators that will be used for submit and button elements
    public $buttonDecorators = array(
        'ViewHelper',
        array('HtmlTag', array('tag' => 'div', 'class' => 'form-button'))
    );


    public function __construct()
    {
        // first set up the $elementDecoratorsNoTag decorator, this is a copy of our regular element decorators, but do not get wrapped in a div tag
        foreach($this->elementDecorators as $decorator) {
            if (is_array($decorator) && $decorator[0] == 'HtmlTag') {
                continue; // skip copying this value to the decorator
            }
            $this->elementDecoratorsNoTag[] = $decorator;
        }

        // set the decorator for the form itself, this wraps the <form> elements in a div tag instead of a dl tag 
        $this->setDecorators(array(
                             'FormElements',
                             array('HtmlTag', array('tag' => 'div', 'class' => 'form')),
                             'Form'));

        // set the default decorators to our element decorators, any elements added to the form
        // will use these decorators
        $this->setElementDecorators($this->elementDecorators);

        parent::__construct();
        // parent::__construct must be called last because it calls $form->init()
        // and anything after it is not executed
    }
}

/*
   Zend_Form_Element default decorators:
   $this->addDecorator('ViewHelper')
        ->addDecorator('Errors')
        ->addDecorator('Description', array('tag' => 'p', 'class' => 'description'))
        ->addDecorator('HtmlTag', array('tag' => 'dd',
                                        'id'  => array('callback' => $getId)))
        ->addDecorator('Label', array('tag' => 'dt'));
*/

Now to use the class, extend all of your forms from this base class and go about assigning elements as usual. If you use Zend_Form_Element_XXX as opposed to addElement() then you will need to pass one of the decorators as an option to the element constructor, if you use Zend_Form->addElement, then it will use the default decorator $elementDecorators we assigned in the class.

Here is an example that shows how to extend from that class:

<?php

class Application_Form_Test extends Application_Form_Base
{
    public function init()
    {
        // Add a text element, this will automatically use Application_Form_Base->elementDecorators for its decorators
        $this->addElement('text', 'username', array(
            'label'      => 'User Name:',
            'required'   => false,
            'filters'    => array('StringTrim'),
        ));

        // This will not use the correct decorators unless we specify them directly
        $text2 = new Zend_Form_Element_Text(
            'text2',
            array(
                'decorators' => $this->elementDecorators, // must give the right decorator
                'label' => 'Text 2'
            )
        );

        $this->addElement($text2);

        // add another element, this also uses $elementDecorators
        $this->addElement('text', 'email', array(
            'label'      => 'Email:', 
            'required'   => false,
            'filters'    => array('StringTrim', 'StringToLower'), 
        ));

        // add a submit button, we don't want to use $elementDecorators, so pass the button decorators instead
        $this->addElement('submit', 'submit', array(
            'label' => 'Continue', 
            'decorators' => $this->buttonDecorators // specify the button decorators
        ));
    }
}

This shows a pretty effective way to get rid of the dd/dt and dl elements and replace them with your own. It is a bit inconvenient to have to specify the decorators for every element, as opposed to being able to assign decorators to specific elements, but this seems to work well.

To add one more solution that I think you were looking to do, if you would like to render an element with no label, simply create a new decorator and omit the label decorator from it like this:

$elementDecorators = array(
    'ViewHelper',
    'Errors',
    array('Description', array('tag' => 'p', 'class' => 'description')),
    array('HtmlTag',     array('class' => 'form-div')),
    // array('Label',       array('class' => 'form-label', 'requiredSuffix' => '*'))
    // comment out or remove the Label decorator from the element in question
    // you can do the same for any of the decorators if you don't want them rendered
);

Feel free to ask for clarification on anything, hopefully this will help you out.