在页面中使用多个表单还是多个提交按钮？

Question

在页面中使用多个表单还是多个提交按钮？

72

我正在创建一个展示网站上销售产品的页面。我想在每个产品旁边包含一个“加入购物车”按钮，这些产品的标记类似于：

<h4 class="productHeading">Product Name 1</h4>
<div>
  Extra information on the product 1.
</div>
<h4 class="productHeading">Product Name 2</h4>
<div>
  Extra information on the product 2.
</div>
 ...

由于提交输入将具有不同名称（包括产品代码），所以关键问题是：应该在一个表单中包装整个产品列表，还是为每个产品创建一个表单？在代码中：

<form method="post" action="process.php">
  <h4 class="productHeading">Product Name 1</h4>
  <div>
    Extra information on the product 1.
    <input type="submit" name="submit1" value="Add to Cart">
  </div>
  <h4 class="productHeading">Product Name 2</h4>
  <div>
    Extra information on the product 2.
    <input type="submit" name="submit2" value="Add to Cart">
  </div>
</form>

或者...

<h4 class="productHeading">Product Name 1</h4>
<div>
  Extra information on the product 1.
  <form method="post" action="process.php">
    <input type="submit" name="submit1" value="Add to Cart">
  </form>
</div>
<h4 class="productHeading">Product Name 2</h4>
<div>
  Extra information on the product 2.
  <form method="post" action="process.php">
    <input type="submit" name="submit2" value="Add to Cart">
  </form>
</div>

哪种方法是最佳实践？有没有使用其中一种或另一种的严重原因，或者我完全错了？

- winck

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ayman Safadi · Accepted Answer

最佳实践：每个产品使用一个表单绝对是正确的做法。

好处：

它将节省您解析数据以确定哪个产品被点击的麻烦
它会减少发布的数据大小

在您特定的情况下

如果您只打算有一个表单元素，例如submit按钮，则一个表单适用于所有情况。

我的推荐：每个产品使用一个表单，并更改您的标记方式如下：

<form method="post" action="">
    <input type="hidden" name="product_id" value="123">
    <button type="submit" name="action" value="add_to_cart">Add to Cart</button>
</form>

这将为您提供一个更干净和可用的POST。无需解析。而且，它将允许您在未来添加更多参数（大小、颜色、数量等）。

注意: 使用<button>与<input>没有技术上的优势，但作为程序员，我认为使用action=='add_to_cart'比action=='Add to Cart'更酷。此外，我不喜欢将演示与逻辑混合在一起。如果有一天你决定按钮上说“添加”更有意义，或者想使用不同的语言，你可以自由地这样做，而不必担心后端代码。