Question

我使用Zend_Form及其默认装饰器来创建表单。这将输出以下HTML：

<dl>
<dt><label for="title">Title</label></dt>
<dd>
  <input type="text" name="title" value="some title">
  <ul>
    <li>Some error message for the title</li>
    <li>Some other error message for the title</li>
  </ul>
</dd>
<dt><label for="type">Type</label></dt>
<dd>
  <select name="type">
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
    <option value="3">Type 3</option>
  </select>
  <ul>
    <li>Some error message for the type</li>
    <li>Some other error message for the type</li>
  </ul>
</dd>
<dt><label for="description">Description</label></dt>
<dd>
  <textarea name="description" rows="40" cols="100">This is a description of the item</textarea>
  <ul>
    <li>Some error message for the description</li>
    <li>Some other error message for the description</li>
  </ul>
</dd>

我需要设置样式，使标签显示在相关输入框的左侧，无序列表中的任何错误都出现在与其相关的元素的右侧。

在过去的好日子里（笑话）我可以使用3列的表格完全达到我的目的：

<table>
<tr>
  <th><label for="title">Title</label></th>
  <td><input type="text" name="title" value="some title"></td>
  <td>
    <ul>
      <li>Some error message for the title</li>
      <li>Some other error message for the title</li>
    </ul>
  </td>
</tr>
<tr>
  <th><label for="type">Type</label>
  </th>
  <td><select name="type">
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
    <option value="3">Type 3</option>
  </select></td>
  <td>
    <ul>
      <li>Some error message for the type</li>
      <li>Some other error message for the type</li>
    </ul>
  </td>
</tr>
<tr>
  <th><label for="description">Description</label></th>
  <td><textarea name="description" rows="40" cols="100">This is a description of the item</textarea></td>
  <td>
    <ul>
      <li>Some error message for the description</li>
      <li>Some other error message for the description</li>
    </ul>
  </td>
</tr>
</table>

显然，这并不是我想要考虑的事情。主要是因为我真的不想将列固定为相同的宽度。

我也试图不使用zend表单装饰器方法，因为从代码可读性的角度来看，你需要提供的糟糕嵌套数组很糟糕。我理想的方法可能是围绕每个标签，输入和ul包装div，然后使用clear：两者都在div上。然后我可以在每个标签上使用float：left，输入和ul。

我在这里测试了这个问题的其他各种答案：http://htmledit.squarefree.com/

其他人的解决方案似乎确实有效。显然，它需要在IE中工作，尽管在IE7之前没有任何东西。如果有人能想出一些只能在IE8中运行的东西，可能会推动它。

我尝试将自定义视图脚本应用于表单元素，但由于select而引发了大量其他问题。

根据以下文章，将ul元素放在dl的dd部分是完全有效的，而不是在dt中：http://www.maxdesign.com.au/articles/definition/

Answer 1

使用jQuery。我假设错误ul元素有一些与它们相关的错误类。使用Javascript：

$('ul.error').each(function(){
  $(this).appendTo(     //get error <ul>
   $(this)              //start chain from self
   .parent()            //move to parent <td>
   .prev()              //move to previous <td> element
  );                // and append there.
});

Answer 2

这个问题的答案似乎是你必须在Zend Framework 1中使用装饰器。

您可能认为viewScripts是一个解决方案，但是如果您沿着那条路走下去，那么您将打开一堆蠕虫，因为您最终将不得不为按钮，文件元素，文本输入，选择创建不同的视图脚本，无线电和复选框，因为它们都需要稍微不同的东西传递给实际渲染元素的内置助手。至少使用装饰器可以避免在每个脚本中进行一定数量的布局复制，只需添加或删除装饰器。

看起来他们正在放弃ZF2中的装饰器方法，但要使用更适合MVC的东西。

由zend表单创建的样式定义列表（必须在IE7 +中工作）

2 个答案: