Zend Form – custom decorators

So I’m learning PHP and Zend Framework and MVC stuff. And I just figured out how to do a custom decorator on Zend_Form to change the way the form is written to HTML. The default puts each element label and input box into dd and dl tags. I just wanted to put each element in a div, with the input box on the same line as the label. There may be better ways to do this, but this is what I put in the IndexController.php file:

$form = new Zend_Form(array(
    'elementDecorators'=>array(
       'ViewHelper',
       array(
          'Description',
          array(
             'tag'=>'div',
             'class'=>'help'
          )
       ),
       'Errors',
       array('Label'),
       array(
          'HtmlTag',
           array(
              'tag'=>'div',
              'class'=>'field'
           )
        )
    ),
    'decorators'=>array(
        'FormElements',
        array(
          'HtmlTag',
          array('tag' => '<div>')
        ),
        'Form',
     ),
    'method' => 'post',
    'action' =>'/url/to/form',
    'elements' => array(
        'name' => array('text', array(
            'label' => 'Name:'
        )),
        'subject' => array('text', array(
            'label' => 'Subject:'
         )),
        'submit' => array('submit', array(
            'label' => 'Add',
        ))
    ),
 ));
 $form->submit->removeDecorator('Label');
 return $form;
}
 public function formAction()
 {
      $this->view->form = $form;
 }

The $form->submit->removeDecorator(‘Label’) bit removes the extra ‘Add’ from the submit button.

Then you just put
echo $this->form;
in your form.phtml

(This form does nothing)

This results in HTML like:

<form method="post" action="/route/to/form">
   <div>
      <div class="field">
         <label for="name" class="optional">Name:</label>
         <input type="text" name="subject" id="subject" value="">
      </div>
      <div class="field">
          <label for="subject" class="optional">Subject:</label>
          <input type="text" name="subject" id="subject" value="">
      </div>
      <div class="field">
           <input name="submit" id="submit" value="Add" type="submit">
      </div>
   </div>
</form>

Instead of the default dd and dl layed out form.

12 responses to “Zend Form – custom decorators”

  1. Cliburn M. Solano avatar

    oww…. tags we’re no escaped. Nweiz, it should look like this:

    DOB:
    Month Day Year

    not:

    Month Day Year
    DOB:

  2. Cliburn M. Solano avatar

    Hi,

    Nice tutorial!! I’ve tried sticking with Zend’s default dt/dd tags for a ‘Date of Birth’ select tag group (Month-Day-Year). What I’m trying to create is like this:

    DOB:

    Jan
    Feb

    01
    02

    1994
    1993

    The closest solution that I got is the reverse of it:

    Jan
    Feb

    01
    02

    1994
    1993

    DOB:

    by adding a select element like this (month only):

    $this->addElement(‘select’, ‘birthday_month’,

    array(

    ‘multioptions’ => $this->_createMonths(),
    ‘disableLoadDefaultDecorators’ => true,
    ‘decorators’ => $this->_standardElementDecorator

    )

    );

    and grouping the select elements (month day year) using this display group:

    $this->addDisplayGroup(

    array(‘birthday_month’, ‘birthday_day’, ‘birthday_year’),
    ‘birthdate_data’,
    array(

    ‘description’ => ‘DOB:’,
    ‘disableLoadDefaultDecorators’ => true,
    ‘decorators’ => $this->_standardGroupDecorator

    )

    );

    using these decorator for the select elements:

    protected $_standardElementDecorator = array(

    ‘ViewHelper’

    );

    and this decorator for the group (month day year):

    protected $_standardGroupDecorator = array(

    ‘FormElements’,
    array(‘Description’, array(‘escape’ => false, ‘tag’ => false)),
    array(‘HtmlTag’, array(‘tag’ => ‘dd’)),

    );

    I know it’s a mouthful for a post hehehe. If I change the order in the group decorator:

    protected $_standardGroupDecorator = array(

    array(‘Description’, array(‘escape’ => false, ‘tag’ => false)),
    ‘FormElements’,
    array(‘HtmlTag’, array(‘tag’ => ‘dd’)),

    );

    Alignment gets broken. Please help. I’m very close.

    Cliburn M. Solano
    Pinoy ako

  3. Ben avatar

    Lovely little tutorial, Beth! This is really a confusing thing to work with, I’ve found. I was having a bit of a tough time figuring out how to wrap both the label and input in a tag.

  4. unioni avatar

    Cheese. The adult form of milk.–Richard Condon (1915–1996), U.S. novelist, A Talent For Loving, 1961

  5. Beth Granter avatar

    NYC? What makes you think I am there? I wish! I am working for the University of Sussex in Brighton, UK.

  6. joshteam avatar

    I just got back from vacation *hence my absence* but I’ve been doing web deving since I was oh, 13? Programming for the past 5 years, mainly php. ZF for about 7-8mo. It’s actually going to save you a TON of headaches by getting you feet wet with OO & MVC. It may seem challenging to pick up on it being green and all, but if you were to become a procedural pro the jump would even be harder.

    The one area that I am new to is blogging ๐Ÿ™‚ hah. So what company do you work for up in NYC?

  7. Beth Granter avatar

    Ah right ha. Yeah you have almost all the same widgets too. I’ve been doing PHP for about a month and zend framework for about 3 weeks! Never done ANY programming before so it’s a bit hard for me, particularly cos we’re doing it MVC style. (Not counting HTML and CSS as programming!). What about you?

  8. joshteam avatar

    haha, i was talking about the blog theme! we picked the same ones. ๐Ÿ™‚ http://joshteam.wordpress.com is my blog. How long have you been doing php, and more importantly.. zend framework?

  9. Beth Granter avatar

    Did I? I got a bit of the above from somewhere but I lost where it was, and had changed it a quite bit anyway. I’ll check yours out if you tell me where it is!

  10. joshteam avatar

    Hey Beth, ha. You stole my design!!! ๐Ÿ™‚ lol just kidding, ironically enough I am writting about the same stuff. Instead of divs i do ul/lis check it out, i’d love your feedback!

  11. Matthew Weier O'Phinney avatar

    Nice work, Beth! If you want to learn even more about form decorators, keep an eye on http://devzone.zend.com/ this week — I have a tutorial on them posting later in the week.

Leave a Reply

Your email address will not be published. Required fields are marked *