使用zend装饰器在zend形式的文本框之后设置图像

时间:2011-04-16 06:31:42

标签: php zend-framework zend-form zend-decorators

我使用zend form和zend decorator来创建表单。我想在文本框后面设置一个图像。像这样: enter image description here

我正在使用zend装饰器,但它给我的是这样的:

enter image description here

我正在使用此代码:

  

Class CountryController扩展了Zend_Controller_Action   {

public $textimage = array(
    'ViewHelper',
     array('FormElements',array('tag'=>'img')),
    'FormElements',
    array(array('openerror' => 'HtmlTag'),array('tag' => 'td', 'openOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND,'width'=>'37%')),
    'Errors',
    array(array('closeerror' => 'HtmlTag'),array('tag' => 'td', 'closeOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)),

    array(array('elementImg' => 'HtmlTag'), array('tag' => 'img','class'=>'imgpos')),

    array('HtmlTag', array('tag' => 'td','align'=>'left')),
    array('Label', array('tag' => 'td')),

    array(array('row' => 'HtmlTag'), array('tag' => 'tr','valign'=>'top','align'=>'right')),
    );

public $elementDecorators = array(
    'ViewHelper',
    'FormElements',
    array(array('openerror' => 'HtmlTag'),array('tag' => 'td', 'openOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)),
    'Errors',
    array(array('closeerror' => 'HtmlTag'),array('tag' => 'td', 'closeOnly' => true, 'placement' => Zend_Form_Decorator_Abstract::APPEND)),

    array('HtmlTag', array('tag' => 'td', 'class' => 'element','align'=>'left','colspan'=>'2')),
    array('Label', array('tag' => 'td')),
    array(array('row' => 'HtmlTag'), array('tag' => 'tr','valign'=>'top','align'=>'right')),
);

public $buttonDecorators = array(
    'ViewHelper',
    'Errors',
    'FormElements',
    array('HtmlTag', array('tag' => 'td','align'=>'left')),
    array(array('row' => 'HtmlTag'), array('tag' => 'div')),
);

public $addButton = array(
    'ViewHelper',
    'Errors',
    'FormElements',
    array('HtmlTag', array('tag' => 'td','align'=>'right')),
    array(array('row' => 'HtmlTag'), array('tag' => 'div')),
);

// ======================为国家添加行动=================== =========

public function addAction()     {

    $request = $this->getRequest();

    $form = new Zend_Form;
    $form->setAction('add')
        ->setMethod('POST')
        ->setAttrib('Name','addfrm')
        ->setAttrib('Id','addfrm');


    $form->addElements(array( 
             new Zend_Form_Element_Text('cou_name',array(
                    'decorators' => $this->textimage,

                  'required'   => true,
                  'label'      => 'Country Name :',
                    'class'=>'textpos',
                    'validator'=>'Alpha',
              )),
              new Zend_Form_Element_Textarea('description',array(
                    'decorators' => $this->textimage,
                  'required'   => true,
                  'label'      => 'Country Description :',
                    'rows'=>10,
                    'cols'=>40,
                    'validator'=>'NotEmpty',
                    'class'=>'textpos',
              )),
            new Zend_Form_Element_Checkbox('block',array(
                'decorators' => $this->elementDecorators,
                'Label'=>'Block :',
                'Value'=>'1',

              )),
              new Zend_Form_Element_Radio('block_r',array(
                'decorators' => $this->elementDecorators,
                'Label'=>'Block :',
                'multiOptions'=>array(0=>'Yes',1=>'No'),
                'Separator'=>'',
              )),
              new Zend_Form_Element_Submit('add',array(
                'decorators' => $this->addButton,
                'Label'=>'Add',
              )),
              new Zend_Form_Element_Button('back',array(
                'decorators' => $this->buttonDecorators,
                'Label'=>'Back',
                'onclick'=>'window.location="list"',
              )),
              ));


$form->setDecorators(array(
    'FormElements',
    array('HtmlTag', array('tag' => 'table','align'=>'center','class'=>'tbcss','width'=>'84%')), 
    'Form',

));

    $this->view->assign('form',$form);

} }

我正在使用IE6。

生成的代码是这样的:

<div class="container">
     <form enctype="application/x-www-form-urlencoded" action="add"
    method="post" Name="addfrm" Id="addfrm" name="">
      <table align="center" class="tbcss" width="84%">
    <tr valign="top" align="right">
        <td id="cou_name-label"><label for="cou_name" class="required">Country
        Name :</label></td>


>     <td align="left"><img class="imgpos"> <input type="text"
>                   name="cou_name" id="cou_name" value="" class="textpos"
>                   validator="Alpha" />
>               <td width="37%"></td>
>               </img></td>

    </tr>
    <tr valign="top" align="right">
        <td id="description-label"><label for="description"
            class="required">Country Description :</label></td>
        <td align="left"><img class="imgpos"> <textarea
            name="description" id="description" rows="10" cols="40"
            validator="NotEmpty" class="textpos"></textarea>
        <td width="37%"></td>
        </img></td>
    </tr>
    <tr valign="top" align="right">
        <td id="block-label"><label for="block" class="optional">Block
        :</label></td>
        <td class="element" align="left" colspan="2"><input type="hidden"
            name="block" value="0" /><input type="checkbox" name="block"
            id="block" value="1" checked="checked" />
        <td></td>
        </td>
    </tr>
    <tr valign="top" align="right">
        <td id="block_r-label"><label class="optional">Block :</label></td>
        <td class="element" align="left" colspan="2"><label
            for="block_r-0"><input type="radio" name="block_r"
            id="block_r-0" value="0" />Yes</label><label for="block_r-1"><input
            type="radio" name="block_r" id="block_r-1" value="1" />No</label>
        <td></td>
        </td>
    </tr>
    <div>
    <td align="right"><input type="submit" name="add" id="add"
        value="Add" /></td>
    </div>
    <div>
    <td align="left">
    <button name="back" id="back" type="button"
        onclick=
    window.location = "list";
Back</button>
    </td>
    </div>
</table>
</form>
</div>

任何人都可以帮助我。

1 个答案:

答案 0 :(得分:0)

在你的CSS中添加

.imgpos {
    float: right;
}

你也可以尝试浮动.textpos到左边