web-dev-qa-db-ja.com

ページ内の複数のフォームまたは複数の送信？

ウェブサイトで販売されている製品のページを作成しています。各商品の近くに「カートに追加」ボタンを含めたいのですが、これは次のようなマークアップでリストされています。

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

送信入力には異なる名前が付けられるため（製品のコードが含まれます）、大きな問題は、製品リスト全体をフォームにラップするか、製品ごとに1つのフォームを作成するかです。コード内：

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

どれがベストプラクティスですか？どちらか一方を使用しない重大な理由、またはそれを完全に間違っていますか？

htmlformssubmitmultiple-forms
56
winck

ベストプラクティス：製品ごとに1つのフォームを使用することをお勧めします。

利点：

  • どの製品がクリックされたかを把握するためにデータを解析する手間が省けます
  • 投稿されるデータのサイズを縮小します

特定の状況で

1つのフォーム要素（この場合はsubmitボタン）のみを使用する場合は、すべてのフォームが正常に機能するはずです。

私の推奨製品ごとに1つのフォームを作成し、マークアップを次のように変更します。

<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'を使用するほうがクールです。それに、プレゼンテーションとロジックを混ぜることが嫌いです。いつかボタンが「追加」と言う方が理にかなっていると判断した場合、または異なる言語を使用したい場合、バックエンドコードを心配することなく自由に行うことができます。

96
Ayman Safadi