Несколько форм или несколько отправок на странице?

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> против <input>, но как программист я считаю, что работать с action=='add_to_cart' круче, чем action=='Add to Cart'. Кроме того, я ненавижу смешивать презентацию с логикой. Если однажды вы решите, что для кнопки имеет смысл сказать «Добавить» или если вы хотите использовать другие языки, вы можете сделать это свободно, не беспокоясь о своем внутреннем коде.