如何在Zend_Form中设置<dt>元素的类?</dt>

时间:2010-05-18 20:30:56

标签: php css zend-form zend-decorators

我正在尝试为一组&lt;设置样式的宽度。 dt&gt; Zend_Form中的元素。 有没有办法为dt元素设置一个类,所以最终的结果是这样的:

     <dt id="name-label" class="xyz" > // trying to add the 'class="xyz"
        <label class="required" for="name">Name:</label>
     </dt>

    <dd id="name-element">
        <input type="text" maxlength="255" size="30" value="" id="name" name="name">
    </dd>

2 个答案:

答案 0 :(得分:2)

尝试这样的事情:

<form id='ID_FOR_FORM' method="post" action="">
    <ul>
        <li>
            <dt><label for="your-name">Your Name:</label></dt>
            <dd><input type="text" size="40" id="your-name" value="" name="your-name" /></dd>
        </li>
        <li>
            <dd><input type="submit" type='button' value="Send" /></dd>
        </li>
    </ul>
</form>

然后在你的css中,你不需要任何类或那个表单的子元素的id,你可以简单地为这个dt做这样的事情:

form#ID_FOR_FORM ul li dt{
    margin:0;
    padding:0;
}

这就是我喜欢使用css,制作好标记,然后我不需要类或id的方法,就像我在这个例子中做的那样。 :)

答案 1 :(得分:1)

我终于找到了解决方案 - 我需要将dt,dd元素包装在&lt; dl&gt;标记并设置&lt;的类。 dl&gt;标签。然后我为&lt;设置了css。 dt&gt;通过&lt; dl&gt;上课,像这样:

示例元素:

        $question = new Zend_Form_Element_TextArea('question'.$i);
        $question->setLabel('Question '.$i.':')
             ->setAttrib('rows', 10)->setAttrib('cols', 40)->setAttrib('class', 'richtexteditor')
             ->addFilter('StringTrim')
             ->addDecorator('HtmlTag', array('tag' =>  'dd','id'=> 'question'.$i.'-element',
                                             'style'=>'width:350px;max-height:202px;'
                                                )
                                 )
             ->addDecorator(array('dlTag'=>'HtmlTag'), array('tag' =>  'dl','class'=> 'xyz')) //added this line
             ->addDecorator('Errors', array('class'=>'custom-errors'))
             ->setOptions(array('onkeyup'=>'textCounter();',
                                'onkeydown'=>'textCounter();'
                                      )
                                );

然后,我将以下内容添加到我的css文件中:

dl.xyz{
        margin: 0;
}
.xyz dt {
    width:97px;
    padding-left: 0px;
    margin-left: -15px;

}

这实现了我一直瞄准的目标 - 修改某些dt元素的风格,同时保留一般/默认&lt; dt&gt;整个表单的样式。