Html 一个页面中的多个表单或多个提交？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8712398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple Forms or Multiple Submits in a Page?
提问by winck
I'm creating a page with the products sold in the website. I'd like to include an "add to cart" button near each product, which are listed with markup similar to this:
我正在创建一个包含网站上销售的产品的页面。我想在每个产品附近添加一个“添加到购物车”按钮，这些按钮列出了类似于以下的标记：
<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>
...
Since the submit inputs will have different names (with the code of the product included), the big question is: should I wrap the entire product list in a form, or should I create one form for each product? In 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>
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>
Which one is best practice? Any serious reason not to use one or the other, or am I doing it completely wrong?
哪一个是最佳实践？有什么严重的理由不使用其中一个，还是我这样做完全错误？
回答by Ayman Safadi
Best practice:one form per product is definitely the way to go.
最佳实践：每个产品一种形式绝对是要走的路。
Benefits:
好处：
- It will save you the hassle of having to parse the data to figure out which product was clicked
- It will reduce the size of data being posted
- 它将为您省去解析数据以确定点击了哪个产品的麻烦
- 它将减少发布的数据的大小
In your specific situation
在你的具体情况
If you only ever intend to have one form element, in this case a submitbutton, one form for all should work just fine.
如果您只打算拥有一个表单元素，在这种情况下是一个submit按钮，那么所有表单都应该可以正常工作。
My recommendationDo one form per product, and change your markup to something like:
我的建议为每个产品做一个表格，并将您的标记更改为：
<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>
This will give you a much cleaner and usable POST. No parsing. Andit will allow you to add more parameters in the future (size, color, quantity, etc).
这将为您提供更清洁和可用的POST. 没有解析。并且它将允许您在未来添加更多参数（尺寸、颜色、数量等）。
Note:There's no technical benefit to using
<button>vs.<input>, but as a programmer I find it cooler to work withaction=='add_to_cart'thanaction=='Add to Cart'. Besides, I hate mixing presentation with logic. If one day you decide that it makes more sense for the button to say "Add" or if you want to use different languages, you could do so freely without having to worry about your back-end code.
注意：使用
<button>vs.没有技术优势<input>，但作为程序员，我发现使用vs.action=='add_to_cart'比使用action=='Add to Cart'. 此外，我讨厌将演示与逻辑混为一谈。如果有一天您认为按钮说“添加”更有意义，或者如果您想使用不同的语言，那么您可以自由地这样做，而不必担心您的后端代码。
