html - 一个页面中的多个表单或多个提交？

Question

我正在创建一个页面，其中包含网站上销售的产品。我想在每个产品附近添加一个“添加到购物车”按钮，列出的标记与此类似:

<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>

哪个是最佳实践？有什么严重的理由不使用其中一个或另一个，还是我做的完全错了？

Answer 1

最佳实践:绝对是每个产品一种形式。

好处:

• 这将使您免去解析数据以确定点击了哪个产品的麻烦
• 它将减少发布数据的大小

---

在您的具体情况下

如果您只打算拥有一个表单元素，在本例中为 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 .没有解析。 并且它将允许您在未来添加更多参数(尺寸、颜色、数量等)。

Note: There's no technical benefit to using <button> vs. <input>, but as a programmer I find it cooler to work with action=='add_to_cart' than action=='Add to Cart'. Besides, I hate mixing presentation with logic. If one day you decide that it makes more sense for the button to say "Add" or if you want to use different languages, you could do so freely without having to worry about your back-end code.