css - 如果我使用的是 Zend_Form,我怎样才能在我的表单右侧放置一个图像?

标签 css forms zend-form

这是我想要的:

alt text

这是我的代码:

<?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'));
    }
}
?>

在我的 View 中,这是我用来显示前一个表单的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>

最佳答案

您可以通过类似这样的方式将 CSS 与 Zend Form 结合使用。

/* 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;
    }

此外,我会使用 FireBug 和 FireFox 在实时站点上手动调整 CSS 设置,以查看在编写 CSS 代码之前需要发生什么。

Firebug :http://getfirebug.com/

关于css - 如果我使用的是 Zend_Form,我怎样才能在我的表单右侧放置一个图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2382882/

相关文章:

javascript - 如何使用 CSS 翻转多个 div?

javascript - 使用 LESS 检测浏览器版本

html - 仅以 HTML 形式出现的拉丁字符

php - 定制 Zend_Form

zend-framework - Zend_Form_Element_File 重命名文件保存扩展名

jquery - 如何在文本字段附近创建一列按钮

css - SilverStripe 3.2 HTMLEditorField 使用 HtmlEditorConfig 自定义 css 样式

javascript - 输入键和 Firefox 提示

html - 如何编写我的 HTML 登录表单以明确启用 LastPass?

php - 如何将选项/参数传递给 ZendFramework 2 中的 formCollection 字段集?