Question

对于标准的“添加项目”表单页面，最好有两个提交按钮：“确定”按钮和“取消”按钮，前者将表单发布到一个URL，后者获取其他一些URL

这显然意味着需要两个单独的FORM，如果使用表格进行布局，则标记将如下所示：

<form action="add.html" method="post">
 <table>
  <tr>
   <td>Enter data:</td><td><input type="text" name="data"/></td>
  </tr>
 </table>
 <input type="submit" value="OK"/>
</form>
<form action="index.html" method="get">
 <input type="submit" value="Cancel"/>
</form>

但是，这会导致两个按钮放在彼此下方。希望将它们并排放置。以下作品：

<form action="add.html" method="post">
 <table>
  <tr>
   <td>Enter data:</td><td><input type="text" name="data"/></td>
  </tr>
  <tr>
   <td><input type="submit" value="OK"/></td>
</form>
<form action="index.html" method="get">
   <td><input type="submit" value="Cancel"/></td>
  </tr>
 </table>
</form>

但是虽然我已经看到它在商业网站上使用过，但我猜这不是很合法的HTML。

因此：

1）由于第二种方法有效，有没有充分理由不使用它？

2）有没有更好的解决方案？

编辑：这是一个愚蠢的问题。第二种方法是不必要的。解决方案：将第一种方法添加到CSS规则：

form
{
  display: inline;
}

Answer 1

你打破了我的想法。

这里有很多不同的问题，但我首先要指出取消/重置是not considered good件generally。

我会指出你可以在第一个例子中使用CSS并排设置按钮的样式，然后通过指出一个简单的type =“button”可以跟随那个有任意附加任何脚本来进行取消导航，并按照那个，因为一个简单的锚标记将更加直接。

我不打算提这张桌子，因为那只会引起一些麻烦。

Answer 2

不要使用第二种形式。用相同的形式包裹两个按钮，并使用取消按钮执行类似的操作：

<input type="button" text="Cancel"
       onclick="document.location.href='index.html';return false;" />

Answer 3

1）当您使用“合法HTML”创建页面时，您可以期望在今天的浏览器中有效的浏览器可以在明天的浏览器中工作，或者在您可能未检查过该网站的其他一些用户代理中工作。但是在您给出的示例中，不同浏览器就如何“修复”HTML进行显示达成一致的程度不太确定。它为使用“有效HTML”时页面的显示方式增加了一定程度的可预测性。此外，谁知道屏幕阅读器等用户代理如何描述相关代码。

2）使用常规锚标签是一个选项吗？

<td><input type="submit" value="OK"/></td>
<td> or <a href="index.html">Cancel</a></td>

或者您可以使用CSS将第二个表单及其提交按钮移动到第一个表单中，但具体情况可能会很棘手。

Answer 4

在表格中添加一行

<tr>
<td><input type="button" value="Cancel" onClick="window.location='./index.html'"/></td>
<td><input type="submit" value="OK" name="submit"/></td>
<tr>

混合HTML表单和表格

4 个答案: