[解決済み] 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"と表示する方が理にかなっていると判断した場合、または異なる言語を使用したい場合、バックエンドのコードを気にすることなく、自由にそうすることができます。
関連
-
[解決済み] CSSのホバー効果が私のコードで機能しない
-
[解決済み】ローカルの実行ファイルへのハイパーリンクを作成する方法は?
-
[解決済み] ボディの背景色が表示されない?
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み】HTMLフォームのネスト制限を克服する方法は?
-
[解決済み] AngularJSでhiddenフィールドの値が送信されない
-
[解決済み] 複数の送信ボタンを持つ django フォームを作成するには?
-
[解決済み] フォームを送信するために通常のリンクを使用する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】CSSの背景画像が表示されない。
-
[解決済み】JQuery: 'Uncaught TypeError: ajaxリクエストで「Illegal invocation」が発生する - 複数の要素
-
[解決済み】Markdownで'target="_blank"'でリンクを作成することはできますか?
-
[解決済み】CSS "margin: 0 auto" が中央揃えにならない。
-
[解決済み] CSS "margin: 0 auto" が中央揃えにならない
-
[解決済み] HTMLでSVGを使用して三日月を描画する
-
[解決済み] CSSでulのインデントを削除する
-
[解決済み] bodyタグに追加された奇妙なiframe、`rufous-sandbox`について
-
[解決済み] HTMLのテーブルを部分的に透明にするには?
-
[解決済み] WebForms UnobtrusiveValidationMode には、'jquery' の ScriptResourceMapping が必要です。jquery という名前の ScriptResourceMapping を追加してください(大文字と小文字を区別します)。