Zend Form – custom decorators

Posted in PHP

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.
Posted by Beth Granter   @   28 April 2008

Related Posts

Like this post? Share it!

RSS Digg Twitter StumbleUpon Delicious Technorati Facebook

11 Comments

Comments
Apr 28, 2008
2:45 pm

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.

May 13, 2008
5:08 pm
#2 joshteam :

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!

May 14, 2008
12:46 pm

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!

May 15, 2008
12:51 am
#4 joshteam :

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?

May 15, 2008
9:02 am

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?

May 25, 2008
2:37 pm
#6 joshteam :

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?

May 26, 2008
2:31 pm

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

Jul 15, 2008
12:58 pm
#8 unioni :

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

Jan 4, 2009
8:52 pm
#9 Ben :

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.

May 2, 2009
7:07 pm

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

May 2, 2009
7:13 pm

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

DOB:
Month Day Year

not:

Month Day Year
DOB:

Leave a Comment

Name

Email

Website

Previous Post
« Blog tag / eight random things
Next Post
Plaxo loses for gender diversity »
My brother Ed's booksA section of my brother Ed's A level artwork My Dad in my brother's living roomMy brother Ed in his living roomMy Dad in my brother's living roomPaul, Matt and Tom at the WindmillLou and Leesa at the Windmill for Leesa's birthdayAnti cuts demo outside Hove Town Hall
Powered by Wordpress   |   Lunated designed by ZenVerse