views:

94

answers:

1

Here's what I'd like:

alt text

Here's my code:

<?php

require_once ('Zend\Form.php');

class Sergio_Form_registrationform extends Zend_Form {
    public function init(){     
        /*********************USERNAME**********************/
        $username = new Zend_Form_Element_Text('username');
        $alnumValidator = new Zend_Validate_Alnum();

        $username   ->setRequired(true)
                    ->setLabel('Username:')
                    ->addFilter('StringToLower')
                    ->addValidator('alnum')
                    ->addValidator('regex', false, array('/^[a-z]+/'))
                    ->addValidator('stringLength',false,array(6,20));
        $this->addElement($username);

        /*********************EMAIL**********************/
        $email = new Zend_Form_Element_Text('email');
        $alnumValidator = new Zend_Validate_Alnum();


        $email      ->setRequired(true)
                    ->setLabel('EMail:')
                    ->addFilter('StringToLower')
                    ->addValidator('alnum')
                    ->addValidator('regex', false, array('/^[a-z]+/'))
                    ->addValidator('stringLength',false,array(6,20));
        $this->addElement($email);

        /*********************PASSWORD**********************/
        $password = new Zend_Form_Element_Password('password');
        $alnumValidator = new Zend_Validate_Alnum();


        $password   ->setRequired(true)
                    ->setLabel('Password:')
                    ->addFilter('StringToLower')
                    ->addValidator('alnum')
                    ->addValidator('regex', false, array('/^[a-z]+/'))
                    ->addValidator('stringLength',false,array(6,20));
        $this->addElement($password);

        /*********************PASSWORD-CONFIRM**********************/
        $passwordc = new Zend_Form_Element_Password('passwordc');
        $alnumValidator = new Zend_Validate_Alnum();


        $passwordc  ->setRequired(true)
                    ->setLabel('Confirm Password:')
                    ->addFilter('StringToLower')
                    ->addValidator('alnum')
                    ->addValidator('regex', false, array('/^[a-z]+/'))
                    ->addValidator('stringLength',false,array(6,20));
        $this->addElement($passwordc);

        /*********************NAME**********************/
        $name = new Zend_Form_Element_Text('name');
        $alnumValidator = new Zend_Validate_Alnum();


        $name       ->setRequired(true)
                    ->setLabel('Name:')
                    ->addFilter('StringToLower')
                    ->addValidator('alnum')
                    ->addValidator('regex', false, array('/^[a-z]+/'))
                    ->addValidator('stringLength',false,array(6,20));
        $this->addElement($name);

        /*********************AVATAR**********************/
        $avatar = new Zend_Form_Element_File('avatar');
        $alnumValidator = new Zend_Validate_Alnum();


        $avatar     ->setRequired(true)
                    ->setLabel('Please select a display picture:');
        $this->addElement($avatar);

        /*********************SUBMIT**********************/

        $this->addElement('submit', 'login', array('label' => 'Login'));
    }
}
?>

And in my View, here's the code I use to show the previous form:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Thank you for signing up!</title>
        <style type="text/css">
        #imageSignUp img{
            float: right;
            padding: 3em;   
        }
        </style>
    </head>
    <body>  
        <h1>Thanks for signing up!</h1> 
        <?php
        echo $this->form;
        ?>

        <img alt="signupimg" src="/img/signup.png">
    </body>
</html>
A: 

You can use CSS with Zend Form using something like this.

/* Zend Form Styling */
    dl.zend dt, dd { min-height: 30px; }
    dl.zend_form dt {
        float: left;
        clear: left;
        text-align: right;
    }
    dl.zend_form dt label.required { font-weight: 600; }
    dl.zend_form dd {
        float: left;
        clear: right;
        padding-left: 5px;
    }

    dl.zend_form dd ul.errors {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    dl.zend_form dd ul.errors li {
        float: left;
        margin: 0 0.15em;
        font-size: 12px;
        color: #666666;
    }

In addition I would use FireBug with FireFox to manually adjust CSS settings on the live site to see what needs to occur before writing the CSS code.

Firebug: http://getfirebug.com/

Todd Moses