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

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.没有解析.而且它可以让你在未来的(大小,颜色,数量等)增加更多的参数.

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