Zend_Form with CSS

Question

i am new to zend i have coded up to some extent but dont know further how to decorate my form using decorators etc

this is my old HTML

<div class="col_6 pre_3 padding_top_60" style="padding-top:0">
<div class="widget clearfix">
    <div class="widget_inside">
        <p class="margin_bottom_15">Kindly enter Username and  Password.</p>
        <span><?= $this->error;?></span>
        <form method='post' action='<?php echo $this->url(array(), 'login') ?>' onsubmit="return validateForm();">
            <div class="form">
                <div class="clearfix" id="div_username">
                    <label class="lable-2">Username</label>
                    <div class="input">
                        <input type="text" class="xlarge" name="username" id="username" value="<?php echo $this->form['username'] ?>"/>
                        <span id="error_message_username"></span>
                    </div>
                </div>
                <div class="clearfix" id="div_password">
                    <label class="lable-2">Password</label>
                    <div class="input">
                        <input type="password" class="xlarge" name="password" id="password" value="<?php echo $this->form['password'] ?>"/>
                        <span id="error_message_Password"></span>
                    </div>
                </div>
                <div class="clearfix">
                <label></label>
                    <div class="input">
                        <input type="checkbox" name="remember" value="1" <?php echo ($this->form['remember'] == 1)?'checked="checked"':'' ?>/></span> Stay signed in
                        <span style="margin-left:10px">Forgot <a href="javascript: void(0);" rel="UserID" id="forgot_userid">User ID</a> or <a href="javascript: void(0);" rel="Password" id="forgot_password">Password</a> </span>
                    </div>
                </div>

                <div class="clearfix">
                    <label></label>
                    <div class="input">
                        <input type="submit" value="Login"  class="medium button blue blue-1"/>
                </div> </div>
            </div>
        </form>
    </div>
</div>

This is my Form

<?php

class Application_Form_Loginform extends Zend_Form{

public function init()
{
    /* Form Elements & Other Definitions Here ... */

    $this->setMethod('post');
    $this->addElement('text','username',array(
        'label'     => 'UserName :',
        'required'  => true,
        'filters'   => array('StringTrim')
    ));

    $this->addElement('password','password',array(
        'label'    => 'Password',
        'required' => 'true',
        'filters'  => array('StringTrim')
    ));
    $this->addElement('submit','submit',array(
       'ignore'=>'true',
       'label'=>'Login'
    ));
}

}

Question is How can i make my form made with php equal to the above HTML ??

Answer 1

Zend Form is a pain to use, especially decorators.

You should use the View Script decorator instead.

See here: http://framework.zend.com/manual/en/zend.form.standardDecorators.html#zend.form.standardDecorators.viewScript

Aside from Zend Form decorators having a high learning curve, it mixes view code with logic and validation code.

This is not a good thing, especially if you have frontend developers styling and working with the forms.

It also makes prototyping the look of the forms difficult since you have to keep adjusting the decorator code.

With that said, Zend Form does a good job of making validation relatively painless. But one other gripe with it is that I don't think it fits well model validation.

Answer 2

I agree that decorators are complex, but they save a GREAT DEAL of time, when you know how to use them. We use them for our admin panel. We recently changed it from table layout to few fieldsets and divs and it took only few hours to change 70+ forms.

Your validators should be something like:

Form:
form, 
htmlTag (div, class=form)
formElements

Elements:
viewHelper
error, placement => append
htmlTag (div, class input)
Label, placement => prepend
htmlTag (div, class=clearfix)

just keep in mind you need to set different keys for each htmlTag decorator, or else they would be overwritten. Like this:

....
array('inputHtmlTag' => 'htmlTag, array('tag' => 'div', 'class' => 'input'), 
....

To see how I deal with complex Twitter Bootstrap decorators see https://github.com/tomasfejfar/Zend-Form-Bootstrap/blob/master/library/Bootstrap/Form.php There you can find clues how to implement your own markup.