html - 如何一致地构造多种形式

Question

我目前正在努力构建多种形式。我不擅长 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，因为 <form>可能不会直接出现在 <tr> 中, 仅在 <td> 内.因此，这两种形式不能像它们应该的那样协同工作。

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

有什么好的方法可以实现吗？

编辑:

因为有些人似乎对我的解释感到困惑，所以我希望这最终看起来像一个图表:

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

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

我需要两个单独的表单，因为这样我可以使服务器端的处理部分非常简单(我根本不需要检查按下了哪个按钮，一个数据就足够了)。如果我尝试将其转换为单一形式，那么我还必须检测按下了两个按钮中的哪一个，这在处理方面要复杂得多。

此外，如果我只是将这些表格简单地分开 <div>它看起来会变形，因为第一种形式比第二种形式长得多。

Answer 1

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