Zend Form – custom decorators
28Apr08
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.
Filed under: Uncategorized | 11 Comments
Tags: custom, custom decorators, PHP, zend, zend form, zend framework, zend_form




Facebook
Myspace
Flickr
YouTube
Del.icio.us
lastfm
Twitter
SPLASH (my work blog)
Bebo
Friendster
Virb
Hi5
LinkedIn
Tagged




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.
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!
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!
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?
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?
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?
NYC? What makes you think I am there? I wish! I am working for the University of Sussex in Brighton, UK.
Cheese. The adult form of milk.–Richard Condon (1915–1996), U.S. novelist, A Talent For Loving, 1961
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.
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
oww…. tags we’re no escaped. Nweiz, it should look like this:
DOB:
Month Day Year
not:
Month Day Year
DOB: