0

我目前正在尝试构建多种形式。我不擅长 HTML，所以我的第一次尝试是使用<table>标签来保持表单的一致性。

<table>
  <tr>
    <form>
      <td><input type="text" /></td><td><input type="submit" value="Display" /></td>
    </form>
  </tr>
  <tr>
    <form>
      <td><input type="text" /></td><td><input type="submit" value="Display" /></td>
    </form>
  </tr>
</table>

这两种形式代表了选择数据的两种可能方式，因此它们需要在代码（即我不能轻易地将它们合并为一个形式）和视觉风格上保持一致。

我希望这能给我两种形式，其中输入字段和按钮（在原始示例中有更多数据和更多按钮）布局一致。但是，这样做有两个问题：

  • 这是滥用<table>布局。我知道这很糟糕，但在这种情况下，这是我愿意接受的一个缺点。
  • 更严重的是：这不是我刚刚学到的有效 HTML，因为 a<form>可能不会直接出现在 a<tr>中，只能出现在 a 中<td>。所以这两种形式不能像他们应该的那样一起工作。

我在网上查看了如何在 HTML 中构建表单并找到了几个链接，但它们都只是一致地处理单个表单的布局（例如通过使用<dl>for layout，这应该比 using 更好<table>）。这意味着我不知道如何将其应用于始终构建这些单独表单的问题。

有什么好的方法可以实现这一目标吗？

编辑：

由于有些人似乎对我的解释感到困惑，这里是我希望最终看起来像的图表：

Value1: [input_field1_which_is_longer]  [Button1]
Value2: [input_field2]                  [Button2]

这里[input_field1_which_is_longer]又[Button1] 属于一种形式。[input_field2]并且[Button2]属于第二种形式。由于这两种形式提供了两种访问相同数据的不同方法，因此它们应该在视觉上对齐。

我需要两个单独的表格，因为这样我可以保持服务器端的处理部分非常简单（我根本不需要检查按下了哪个按钮，单独的数据就足够了）。如果我试图把它变成一个单一的形式，那么我还必须检测两个按钮中的哪一个被按下，这在处理方面要复杂得多。

此外，如果我只是将这些表格放入简单的单独<div>的 s 中，它会看起来变形，因为第一个表格比第二个表格长得多。

4

3 回答 3

1

使用表格作为表格的结构是可以的；只需忽略宗教上的反对意见，特别是因为字段及其标签构成了表格数据的一个很好的例子。（并非所有数据都是数字。）

你提到的语法问题更严重。是的，它肯定是任何 HTML 版本的无效标记。但它有效。不，没有人可以保证在任何情况下都可以在每个浏览器上运行。如果您查看 Firebug 中的页面，您会看到代码没有被正常解析。因此，样式化表单可能会失败。

HTML5 具有让您使用属性将表单字段与表单相关联的功能，而不是通过句法嵌套进行的普通简单关联。他们会很好地解决问题，只要您可以依靠他们跨浏览器工作（您可能需要等待十年左右☺）。

如果您使用单独的表格，每个表格都有自己的形式，您可以避免这个语法问题。但是你有一个样式问题，因为每个表的列宽分配是单独进行的。设置固定宽度可以解决这个问题，如果使用单位也不会太糟糕em，但也不是很理想：您需要猜测或估计宽度，而不是让浏览器自适应地进行。

如果可能的话，理想的解决方案是使其成为一个包含表格的大型表格。然后，服务器端表单处理程序首先需要检查哪个按钮用于提交它，并相应地进行分支。如果表格复杂且结构和功能不同，这将是不可行的。但对于一组小表格，它可能工作得很好。

于 2012-05-04T11:56:16.227 回答
1

作为与我的第一个答案不同的方法，您可能会考虑不在 HTML 标记中使用表格，而是在 CSS 中创建表格表示。主要问题似乎是在 IE 9 之前的 IE 中缺乏支持。这在某些情况下可能是可以接受的；在旧的 IE 版本上，该功能仍然存在并且标记将是有效的，但格式会很差。

在这种方法中，您将拥有一个div元素，例如class=forms，包含form元素。在它们内部，您将使用span带有 ，class=cell而不是元素的td元素。你会display在 CSS 中使用合适的值，例如

<style>
.forms { display: table; }
form   { display: table-row; }
.cell  { display: table-cell; }
</style>
<div class="forms">
   <form action="...">
      <span class="cell"><input type="text" ... /></span>
      <span class="cell"><input type="submit" value="Display" /></span>
   </form>
   <form action="...">
      <span class="cell"><input type="text" ... /></span>
      <span class="cell"><input type="submit" value="Display" /></span>
   </form>
</div>
于 2012-05-04T15:37:04.360 回答
1

是的...我个人会使用<form>然后<ul> <li>或浮动<div>除了表格之外的任何东西，按照标准，它只能用于表格数据。您需要提供更多关于您需要实现的目标的详细信息。就个人而言，我有点困惑。

于 2012-05-04T08:33:28.820 回答