Question

我正在尝试使用Zend Form使用Abide验证呈现Foundation 5表单。我仍然在努力完全理解如何使用Zend的ViewHelpers和Decorator来渲染带有Foundation所需div的表单 - 我可以将一个表单元素包装在一个正确归类的div中，但我无法放置例如<div class="row">中的几个元素。

这是我无法完成的事情：

1）为每个表单元素的父div分配一个类。我可以为每个包装器div分配相同的类（请参阅下面的代码），但不能分配给单个元素。当我尝试添加$element->setAttrib('class','small-##')时，它将其应用于<input />元素，而不是该包装div。例如，firstName和lastName应为class="small-6"，而下一行company为class="small-12"

2）将多个表单元素放在<div class="row">标记中，然后再次为下一个表单行执行此操作。现在我可以将每个元素放在一行，但我不知道如何将多个元素放入同一个<div class="row">。

3）在Foundation示例中，<label>标记环绕<input>标记，但Zend在输入之前关闭标签。这有关系吗？

以下是我要呈现的HTML：

<form method="post" action="" enctype="multipart/form-data" data-abide>
<div class="row">
    <div class="large-12 columns">
      <div class="row">
            <div class="small-2 columns">
              <label for="display" class="inline">Display For: </label>
            </div>
            <div class="small-10 columns">
               <input type="radio" name="display" value="0" id="displayEveryone" checked><label for="displayEveryone" class="inline">Everyone</label>
               <input type="radio" name="display" value="999" id="displaySelf"><label for="displaySelf" class="inline">Only Me</label>
            </div>
      </div>
    </div>
</div>
<div class="row">
    <div class="small-6 columns">
        <label>First Name
        <input type="text" required class="contact" name="firstName" id="firstName" maxlength="25" autofocus="autofocus"/>
      </label>
      <small class="error">First name is required.</small>
    </div>
    <div class="small-6 columns">
        <label>Last Name
        <input type="text" required class="contact" name="lastName" id="lastName" maxlength="25"/>
      </label>
      <small class="error">Last name is required.</small>
    </div>
</div>
<div class="row">
    <div class="small-12 columns">
        <label>Company or Affiliation
        <input type="text" class="contact" name="company" id="company" maxlength="125"/>
      </label>
    </div>
</div>
<div class="row">
    <div class="small-4 columns">
        <label>Work Phone
        <input type="text" class="contact" name="workPhone" id="workPhone" />
      </label>
    </div>
    <div class="small-4 columns">
        <label>Cell Phone
        <input type="text" class="contact" name="cellPhone" id="cellPhone" />
      </label>
    </div>
    <div class="small-4 columns">
        <label>Home Phone
        <input type="text" class="contact" name="homePhone" id="homePhone" />
      </label>
    </div>
</div>
</form>

这是我目前拥有的Zend表单脚本，需要更改：

class Application_Form_Contact extends Zend_Form
{

    public function init()
    {
        $this->setMethod('post');
        $this->setName('addContact');
        $this->setAttrib('enctype', 'multipart/form-data') ;
        $id = new Zend_Form_Element_Hidden('contactID');$id->addFilter('Int');

        $display= new Zend_Form_Element_Radio('display');
        $display->setLabel('Display For: ')
                ->setRequired(true)
                ->addMultiOptions(array(0 => "Everyone", 999 => "Only Me"));

        $fName = new Zend_Form_Element_Text('firstName');
        $fName->setLabel('First Name: ')
                ->setRequired(true)
                ->setAttrib('maxlength', 25)
                ->setAttrib('autofocus', 'autofocus')
                ->addFilter('StripTags')
                ->addFilter('StringTrim');

        $lName = new Zend_Form_Element_Text('lastName');
        $lName->setLabel('Last Name: ')
                ->setRequired(true)
                ->setAttrib('maxlength', 25)
                ->addFilter('StripTags')
                ->addFilter('StringTrim');

        $company = new Zend_Form_Element_Text('company');
        $company->setLabel('Company: ')
                ->setRequired(false)
                ->setAttrib('maxlength', 125)
                ->addFilter('StripTags')
                ->addFilter('StringTrim');

        $workPhone = new Zend_Form_Element_Text('workPhone');
        $workPhone->setLabel('Work Phone: ')
                ->setRequired(false)
                ->setAttrib('class', 'small-4')
                ->addFilter('StripTags')
                ->addFilter('StringTrim');

        $cellPhone = new Zend_Form_Element_Text('cellPhone');
        $cellPhone->setLabel('Cell Phone: ')
                ->setRequired(false)
                ->setAttrib('class', 'small-4')
                ->addFilter('StripTags')
                ->addFilter('StringTrim');

        $homePhone = new Zend_Form_Element_Text('homePhone');
        $homePhone->setLabel('Home Phone: ')
            ->setRequired(false)
            ->setAttrib('class', 'small-4')
            ->addFilter('StripTags')
            ->addFilter('StringTrim');

        $otherPhone = new Zend_Form_Element_Text('otherPhone');
        $otherPhone->setLabel('Other Phone: ')
                ->setRequired(false)
                ->addFilter('StripTags')
                ->addFilter('StringTrim');

        $submit = new Zend_Form_Element_Submit('submit');
        $submit->setAttrib('id', 'submitbutton');

        $this->addElements(array($id, $display, $fName, $lName, $company, $workPhone, $cellPhone, $homePhone, $otherPhone, $submit));

        $this->setElementDecorators(array(
            'ViewHelper',
            array('Description'),
            array('Errors'),
            array(array('data' => 'HtmlTag'), array('tag' => 'div', 'class'=>'small-6 columns')),
            array('Label'),
            array(array('row' => 'HtmlTag'), array('tag' => 'div', 'class'=> 'row'))
            ));

        $submit->setDecorators(array(
            'ViewHelper',
            array(array('data' => 'HtmlTag')),
            array(array('row' => 'HtmlTag'))
            ));

        $this->setDecorators(array(
            'FormElements',
            array('HtmlTag', array('tag' => 'div', 'class'=>'small-12 columns')),
            array('Form', array('data-abide'=>'data-abide'))
            ));                     
        $view = $this->getView();
        $formErrors = $view->getHelper('formErrors');
        $formErrors->setElementStart('<small class="error">')
                    ->setElementSeparator('')
                    ->setElementEnd('</small>');      
    }
}

感谢您的帮助。

Answer 1

不需要加载默认装饰器

默认情况下，在对象初始化期间加载默认装饰器。您可以通过将“disableLoadDefaultDecorators”选项传递给构造函数来禁用它：

$element = new Zend_Form_Element('foo', 
    array('disableLoadDefaultDecorators' => true)
);

创建一个视图并添加如下表单元素：

<?php echo $this->YourFormObject->getElement('YourElementID'); ?>

我已经做到了希望这对你有帮助......

如何使用Zend Framework在表单元素周围渲染Foundation 5的包装div

1 个答案: