Несколько форм или несколько сообщений на странице?

Я создаю страницу с продуктами, проданными на веб-сайте. Я хотел бы добавить кнопку "добавить в корзину" рядом с каждым продуктом, которые перечислены с разметкой, подобной этой:

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

Какая из них - лучшая практика? Любая серьезная причина не использовать то или другое, или я делаю это совершенно неправильно?

Ответ 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'. Кроме того, я ненавижу смешивать презентацию с логикой. Если однажды вы решите, что для кнопки имеет смысл сказать "Добавить" или если вы хотите использовать разные языки, вы можете сделать это свободно, не беспокоясь о своем внутреннем коде.