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

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

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

Or…

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

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


forms html multiple-forms submit
person winck    schedule 03.01.2012    source источник

Ответы (1)


arrow_upward
107
arrow_downward

Рекомендация: одна форма для каждого продукта — это, безусловно, правильный путь.

Выгоды:

  • Это избавит вас от необходимости анализировать данные, чтобы выяснить, какой продукт был нажат.
  • Это уменьшит размер публикуемых данных.

В вашей конкретной ситуации

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

person Ayman Safadi    schedule 03.01.2012
comment
Спасибо Айман. Некоторые комментарии: что касается первого пункта, мне все равно не придется анализировать данные? Это будет несколько форм с одним и тем же действием. А в пункте 2 будет отправлен только один submit, поэтому размер POST должен быть одинаковым в обоих случаях, верно? - person winck; 03.01.2012
comment
Большое спасибо Айман! К сожалению, я могу проголосовать только один раз! С наилучшими пожеланиями - person winck; 03.01.2012
comment
@winck, в вашем случае вы правы в обоих случаях. Однако, как только вы добавите в форму второе поле, моя рекомендация станет более осмысленной. - person Ayman Safadi; 04.01.2013
comment
Наличие нескольких форм также означает, что вы можете использовать проверку на стороне клиента, такую ​​как атрибут required, но это не означает, что ваши пользователи должны заполнять поле для продукта x при изменении чего-либо о продукте y. - person Sam; 23.09.2016
comment
Последний комментарий Сэма решил мою дилемму. Спасибо Сэм! - person griswolf; 15.11.2018