Html 一个页面中有多个表单还是多个提交？

我正在用网站上出售的产品创建一个页面。我希望在每个产品附近都包含一个“添加到购物车”按钮，该按钮列出的标记类似于以下内容：

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

产品名称1
关于产品1的额外信息。
产品名称2
关于产品2的额外信息。
...

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

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

产品名称1
关于产品1的额外信息。
产品名称2
关于产品2的额外信息。

或者

产品名称1
关于产品1的额外信息。
产品名称2
关于产品2的额外信息。

---

哪一个是最佳实践？是否有任何严肃的理由不使用其中一种，或者我的做法完全错了？

最佳实践：每个产品一个表单绝对是正确的选择

好处：

• 它将为您省去解析数据以确定单击了哪个产品的麻烦
• 它将减少发布的数据的大小

---

在您的特定情况下

如果您只希望有一个表单元素，在本例中是一个

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

。没有解析。它将允许您在将来添加更多参数（尺寸、颜色、数量等）

注意：使用

与

相比没有任何技术优势，但作为一名程序员，我发现使用

操作=='add\u to\u cart'

比使用

操作==='add to cart'

更酷。此外，我讨厌把陈述和逻辑混为一谈。如果有一天您决定按钮上写“Add”更有意义，或者您想使用不同的语言，那么您可以自由地这样做，而不必担心后端代码

---

谢谢你，艾曼。一些评论：关于第一点，我不需要解析数据吗？它将是具有相同“动作”的多种形式。在第二点上，只会发送一次提交，所以两种情况下的帖子大小应该相同，对吗？非常感谢Ayman！不幸的是，我只能投一次票！最好的wishes@winck在你的情况下，你在这两方面都是对的。但是，当您在表单中添加第二个字段时，我的建议会更有意义。拥有多个表单也意味着您可以使用客户端验证，如

required

属性，没有它意味着用户在修改产品y时必须填写产品x的字段。Sam的最终评论解决了我的难题。谢谢你，山姆！

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