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?

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

Solution 2

You can disable decorators at form level like this.

$form->setElementDecorators($decorators);

This will remove the default decorators and sets the decorators in $decorators array as the decorators. If you want to selectively remove decorators, you should look into the implementation of this method and create a similar one for removing decorators.

If you want to disable certain decorators for all your forms, create a class Your_Form that extends Zend_Form and remove those decorators on Your_Form and extend all your forms from this class or simply create instances of this class.

Solution 3

I think the only way of doing this is to extend Zend_Form and then overide the loadDefaultDecorators() and render() functions as follows. See if this works for you.

class App_Form extends Zend_Form
{
    public function loadDefaultDecorators() 
    {
        if ($this->loadDefaultDecoratorsIsDisabled()) {
            return $this;
        }

        $decorators = $this->getDecorators();
        if (empty($decorators)) {
            $this->addDecorator('FormElements')
                 ->addDecorator('Form');
        }
        return $this;
    }

    public function render(Zend_View_Interface $view = null) 
    {
        $elements = $this->getElements();
        foreach($elements as $element){
            $element->setDecorators(array(
                'ViewHelper',
                'Errors',
                array('Description', array('tag' => 'p', 'class' => 'description')),
                'Label',
            ));
        }
        $content = parent::render($view);
        return $content;
    }
}

Edit:

I think that this method will still be slightly inconvenient as the new render() function will strip any tags you have added to your elements. In order to get around this you would need to extend Zend_Form_Element and overide its loadDefaultDecorators() method in the same way as I have done here for the form.

In my opinion, and probably that of many other developers using Zend_Form there should be no tags in the form markup by default other than <form>, <input> and <label> tags. Anything else can be added by the developer with existing methods.

Solution 4

The following 4 lines of code work for me

$elements = $this->getElements();
        foreach($elements as $element) {
            $element->removeDecorator('DtDdWrapper')
            ->removeDecorator('HtmlTag')
            ->removeDecorator('Label');
        }

Lovely

Solution 5

Getting a little late in the thread, but it worked for me

foreach( $this->getElements() as $el )
{
    foreach( $el->getDecorators() as $dec )
    {
        if( $dec instanceof Zend_Form_Decorator_HtmlTag ||
            $dec instanceof Zend_Form_Decorator_Label )
        {
            $dec->setOption( 'tag', 'li' );
        };
    };
};

View more solutions

Comments

[Gordon]

Can also use setDisableLoadDefaultDecorators() to disable loading default decorators

[markus]

@Gordon This does not remove all of the tags.

[markus]

This answer does NOT address the problem of the wrappers on the form itself! Furthermore there has to be a solution which just lets remove ALL of the decorators without setting any custom ones.

[markus]

This answer does NOT address the problem of the wrappers on the form itself! Furthermore this will remove label texts which are necessary.

[Gordon]

@markus setDecorators() is a method on Zend_Form that will overwrite any existing decorators, so I am not sure why you think my answer does not address the problem. Pass an empty array and all decorators on the form itself are gone.

[markus]

@Gordon: I still get dl, dt and dd tags. I really didn't invest 250 rep on this because it works. I may be doing something awfully wrong but I've been trying different stuff for years and I never managed to get a clean form so far. If I have to invoke more than 2 methods to get a clean form then something is seriously wrong with Zend_Form. I don't have time to investigate that, it has to work, so I'm hopeing someone wants 250 rep and comes up with a complete and working solution.

[satrun77]

Post your entire source code so other can see what you are doing wrong. Also, Zend_Form is an easy class to use and flexible.

[markus]

Thanks a lot for putting some effort into this! Great answer!