问题描述

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

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

哪一个是最佳做法？任何严重的理由不使用一个或另一个，还是我这样做完全错了？

最佳解决方案

最佳实践：每种产品的一种形式绝对是要走的路。

优点：

  • 这将节省您解析数据的麻烦，以确定哪个产品被点击

  • 它将减少正在发布的数据的大小

在你的具体情况下

如果你只想有一个表单元素，在这种情况下，一个 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.

参考文献

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。