将表单输入字段放在一起


Zend form input fields next to eachother

如果您正在阅读本文,您可能知道自定义Zend表单的布局是多么痛苦。我想要实现的布局是这样的:

Name: [Type your first name here][Type your last name here]
Address: [Type your street here][Type your number here][Type your addition here]

有谁知道如何实现这一点,或者有人能指出我一个很好的例子吗?

我会尝试为表单和不同类型的字段创建自定义装饰器。

围绕表单元素的表单装饰器

<form>%rows</form>

分隔行的行装饰符

<div style="clear: both">%elements</div>

一个元素装饰符,同时显示标签和元素,并将所有元素都向左浮动

<span style="float: left">%label</span>%left_floated_element

一个元素装饰符,只显示该元素并将其浮动到左侧

%left_floated_element

输出结果类似于:

<!-- Form decorator output -->
<form>
    <!-- Extra decorator to make sure you get rows -->
    <div style="clear: both">
        <!-- First element decorator output: label and element -->
        <span style="float: left">Name</span><input type="text" name="firstname" style="float: left" .../> 
        <!-- Second element decorator output: just the element -->
        <input type="text" name="lastname" style="float: left" .../> 
    </div>
    <!-- Extra decorator to make sure you get rows -->
    <div style="clear: both">
        <!-- First element decorator output: label and element -->
        <span style="float: left">Address</span><input type="text" name="street" style="float: left" .../> 
        <!-- Second element decorator output: just the element -->
        <input type="text" name="number" style="float: left" .../> 
        <!-- Second element decorator output: just the element -->
        <input type="text" name="addition" style="float: left" .../> 
    </div>
</form>

您还可以更改使用的HTML来构建表,而不是使用div来完成工作。

查看Zend框架手册,了解如何创建自己的自定义装饰器。

http://framework.zend.com/manual/en/zend.form.decorators.html

最终发生的是,我认为这是Zend_Form总体上的一个弱点,您通常希望能够自由地放置您认为合适的标签。如果你要重用一个显示样式,创建一个自定义装饰器是有意义的,比如如果你要创建一个类似Sharepoint的应用程序,但是在表单不打算被重用的情况下,或者必须根据空间限制、视觉样式等进行自定义的情况下,为每种情况创建装饰器的成本太高了。装饰器应该是你的第二选择,也就是说,当你喜欢一种显示风格,并想在你的网站上到处使用它的时候。

在O'Phinney的设计中,你可以做的就是把标签从装饰器中去掉,但仍然设置标签。使用如下的viewscript:

$form->setDecorators(array('ViewScript',array('viewScript' => 'path/from/views/scripts/of/module'));

在viewscript中,像正常一样布局html。这样,您就不必为您想要的每种视觉/结构显示变体创建任意结构。

$this->element->name;

将生成无标签字段。

$this>element->name->getLabel(); 

将生成标签文本。

如果您需要一些关于如何枚举装饰器以获得此效果的帮助,通常如果例如您正在使用Dojo Elements,则可以使用

array('DijitElement','Errors','HtmlTag','Label')

作为你的装饰。

请删除标签。如果label在这样的数组中

array('Label',array(...))

删除该数组,因为它代表了该装饰器的配置。

当然,在选项中确保设置了'label'=> 'desired label'

现在,在您的表单中,您可以随意放入这些元素,而不必限制标签应该放在哪里!

注意,如果你在表单字段上使用默认的装饰器设置,你可能想弄清楚默认的装饰器是什么,因为当你开始设置它们时,你可能会意外地错过一个装饰器并丢失一些东西。