問題描述

我正在網站上銷售的產品建立一個頁面。我想在每個產品附近新增一個 「新增到購物車」 按鈕，其中列出了與此類似的標記：

<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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。