web-dev-qa-db-fra.com

Plusieurs formulaires ou plusieurs envois dans une page?

Je crée une page avec les produits vendus sur le site. J'aimerais inclure un bouton "ajouter au panier" à côté de chaque produit, qui est répertorié avec une balise semblable à ceci:

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

Étant donné que les entrées soumises auront des noms différents (avec le code du produit inclus), la grande question est: dois-je emballer toute la liste de produits dans un formulaire ou dois-je créer un formulaire pour chaque produit? Dans du code:

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

Ou…

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

Lequel est la meilleure pratique? Une raison sérieuse de ne pas utiliser l’un ou l’autre, ou est-ce que je me trompe complètement?

htmlformssubmitmultiple-forms
56
winck

Meilleure pratique: un formulaire par produit est la solution.

Avantages:

  • Cela vous évitera d'avoir à analyser les données pour déterminer le produit sur lequel vous avez cliqué.
  • Cela réduira la taille des données publiées

dans votre situation spécifique

Si vous avez toujours l'intention d'avoir un seul élément de formulaire, dans ce cas, un bouton submit, un seul formulaire pour tous devrait fonctionner correctement.

Ma recommandation Faites un formulaire par produit et changez votre marge de profit en quelque chose comme:

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

Cela vous donnera une beaucoup plus propre et utilisable POST. Pas d'analyse. Et cela vous permettra d'ajouter plus de paramètres dans le futur (taille, couleur, quantité, etc.).

Note: Il n'y a aucun avantage technique à utiliser <button> contre. <input>, mais en tant que programmeur, je trouve plus cool de travailler avec action=='add_to_cart' que action=='Add to Cart'. En outre, je déteste mélanger présentation et logique. Si un jour vous décidez qu'il est plus logique que le bouton indique "Ajouter" ou si vous souhaitez utiliser différentes langues, vous pouvez le faire librement, sans avoir à vous soucier de votre code back-end.

96
Ayman Safadi