Zend framework form Decorators

Question

i am trying to get the following layout using decorators:

    <form action="/index/login" method="post" id="login_form">            
        <div class="input_row">
            <img src="/images/user_icon.png" class="login_icon" alt=""/>                
            <label for="username" class="login_label">Username:</label>                
            <input type="text" name="username" value="" id="username" class="login_input"  />                            
        </div>
        <div class="input_row">
            <img src="/images/password_icon.png" class="login_icon" alt=""/> 
            <label for="password" class="login_label">Password:</label>                
            <input type="password" name="password" value="" id="password" class="login_input"  />                       
        </div>
        <div class="input_row">
            <input type="submit" name="login_submit" value="Login" class="login_submit"  />  
        </div>
    </form>

I have got this so far:

    $form = new Zend_Form;

    $form->setAction('/index/login')
         ->setMethod('post')
         ->setAttrib('id', 'login_form');

    $username = $form->createElement('text', 'username');
    $username->addValidator('alnum')
             ->setRequired(TRUE)
             ->setLabel('Username')
             ->setAttrib('class', 'login_input');


    $username->setDecorators(array(
            'ViewHelper',
            'Errors',
            array('Label',array('class' => 'login_label')),
            array('row' => 'HtmlTag'), array('tag' => 'div', 'class' => 'input_row')
        ));


    $form->addElement($username)
         ->addElement('submit', 'login', array('label' => 'Login'));           

How do i place the tag above the label?

Thanks!

Answer 1

I prepared an example that should be helpful in solving your problem. Here it is:

    $form = new Zend_Form;

    $form->removeDecorator('htmlTag');

    $form->setAction('/index/login')
            ->setMethod('post')
            ->setAttrib('id', 'login_form');

    $username = $form->createElement('text', 'username');

    $username->addValidator('alnum')
            ->setRequired(TRUE)
            ->setLabel('Username')
            ->setAttrib('class', 'login_input');


    // anonymous function that will generate your image tag
    $makeImg = function($content, $element, array $options) {
                return '<img src="/images/' . $options['img'] . '" class="' . $options['class'] . ' " alt=""/> ';
            };


    $username->setDecorators(array(
        'ViewHelper',
        'Errors',
        array('Label', array('class' => 'login_label')),
        array('Callback',
            array(
                'callback' => $makeImg,
                'img' => 'user_icon.png',
                'class' => 'login_icon',                    
                'placement' => 'PREPEND'
            )
        ),
        array('HtmlTag', array('tag' => null, 'class' => 'input_row')),
    ));

    $form->addElement($username);


    $submit = $form->createElement('submit', 'login', array(
                'label' => 'Login',
                'class' => 'login_submit'
                    )
    );


    $submit->setDecorators(array(
        'ViewHelper',
        'Errors',
        array('HtmlTag', array('tag' => null, 'class' => 'input_row')),
    ));

    $form->addElement($submit);

The form generates the following html (I did not generated password field as your Zend_Form code does not contain it):

 <form id="login_form" enctype="application/x-www-form-urlencoded" action="/index/login" method="post">
      <div class="input_row">
         <img src="/images/user_icon.png" class="login_icon " alt=""> 
         <label for="username" class="login_label required">Username</label>  
         <input type="text" name="username" id="username" value="" class="login_input">
      </div>
      <div class="input_row">
         <input type="submit" name="login" id="login" value="Login" class="login_submit"> 
      </div>
   </form>

What's worth mentioning is that I used Callback decorator. With this decorator you can call any function that can be used to inject custom html into your forms. In this example I made an anonymous function that I assigned to $makeImg variable (for this you need PHP 5.3 but in older versions of PHP you could do it also, but using eg create_function function). This $makeImg variable is my callback. As can be seen the function generates your img html tag.

Hope this will be helpful to you.

Answer 2

you can use form decorator

After add element set setDecorators here you can write HTML as you wan to show.

$this->addElements(array(  
           $id,
           $group_id,
           $content_name,
           $title, 
           $content,
           $tags,
           $status,
           $Publish
       ));

      $this->setDecorators(array(array('viewScript', array('viewScript' => 'admin/articleFormDecorator.phtml'))));

Answer 3

You could check out the AnyMarkup decorator:

http://www.zfsnippets.com/snippets/view/id/62/anymarkup-decorator