1. ホーム
  2. html

[解決済み] 1つのページに複数のフォームまたは複数のサブミット?

2022-02-14 01:22:29

質問

ホームページで販売している商品を紹介するページを作成しています。各商品の近くに"add to cart"ボタンを設置したいのですが、このようなマークアップでリストアップされています。

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

どちらがベストプラクティスなのでしょうか?あるいは、私が完全に間違っているのでしょうか?

どのように解決するのですか?

ベストプラクティス 1つの製品に1つのフォームが最適です。

メリット

  • どの商品がクリックされたかを把握するためにデータを解析する手間が省ける
  • 投稿されるデータのサイズを小さくすることができます

あなたの具体的な状況において

フォーム要素を1つだけ持つつもりなら、この場合は submit ボタンがあれば、1つのフォームですべてうまくいくはずです。


私のおすすめ 1商品につき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> vs. <input> が、プログラマーとしては action=='add_to_cart' よりも action=='Add to Cart' . それに、私はプレゼンテーションとロジックを混同するのが嫌いなんです。ある日、ボタンに "Add"と表示する方が理にかなっていると判断した場合、または異なる言語を使用したい場合、バックエンドのコードを気にすることなく、自由にそうすることができます。