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 submit button, one form for all should work just fine.
My recommendation Do 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. And it will allow you to add more parameters in the future (size, color, quantity, etc).
Answer from Ayman Safadi on Stack OverflowNote: 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.
I have a scenario like this - user needs to confirm overwrites for multiple files - so the backend generates an html page with an arbitrary number of yes or no questions for each overwrite, somthing like this: "Should file "review.xml" be overwritten?" <button> Yes </button> <button> No </button> and so on for an as many files as needed. So the page looks like a list of questions, each with a yes or no button/radiobutton next to it. The user goes down the page clicking yes or no for each item then clicks submit at the end. The server then needs to receive the filename as well as a yes or no value or a boolean for each decision, so something like { "review.xml" : yes } {"topography.png" : no} etc. How can I accomplish this?
php - How to place two forms on the same page? - Stack Overflow
php - Multiple HTML Forms on One Page - Stack Overflow
Why are two forms on one page bad? - User Experience Stack Exchange
Multiple Forms on One Page - PHP - SitePoint Forums | Web Development & Design Community
Videos
I feel like you've already answered your questions.
- One sign up form = one form tags.
- Multiple forms = many form tags.
Just don't nest them.
EDIT
Form tags are meant to hold a variety of fields (i.e. input tags) that you will eventually pass to a target URL using a GET or POST request.
Take this login form, for example:
<form action="login.php">
<input id="name" type="text" name="name">
<input id="passwd" type="password" name="passwd">
<input type="submit" value="Login">
</form>
This has a login, a password, and a submit button. When the "Login" button (type = "submit") is pressed, the form will take that information and send it to another URL (in this case, "login.php", and that URL will handle the information accordingly (e.g. validate, sign you in, display captcha).
There is no reason why you can't have multiple forms on a single page. You just can't nest forms, because then the forms aren't able to identify which fields are for what.
Conceptually, if you need to have the information for two forms occupy the same section or area on your site (for example, if you were combining your sign-up and email list forms or something), you would use a single form and sort out the information from the POST variable on the other end. So long as you name things in a way that makes sense, you shouldn't even want nested forms to accomplish this.
Edit:
To further answer your question, a form tag, in its most basic use case, is used to submit data to a URL. The URL you choose to submit a form to typically receives that data and processes it in some way before taking action on that data, like storing the data in a database, or creating a new user based on a given username and password.
You could make two forms with 2 different actions
<form action="login.php" method="post">
<input type="text" name="user">
<input type="password" name="password">
<input type="submit" value="Login">
</form>
<br />
<form action="register.php" method="post">
<input type="text" name="user">
<input type="password" name="password">
<input type="submit" value="Register">
</form>
Or do this
<form action="doStuff.php" method="post">
<input type="text" name="user">
<input type="password" name="password">
<input type="hidden" name="action" value="login">
<input type="submit" value="Login">
</form>
<br />
<form action="doStuff.php" method="post">
<input type="text" name="user">
<input type="password" name="password">
<input type="hidden" name="action" value="register">
<input type="submit" value="Register">
</form>
Then you PHP file would work as a switch($_POST['action']) ... furthermore, they can't click on both links at the same time or make a simultaneous request, each submit is a separate request.
Your PHP would then go on with the switch logic or have different php files doing a login procedure then a registration procedure
Well you can have each form go to to a different page. (which is preferable)
Or have a different value for the a certain input and base posts on that:
switch($_POST['submit']) {
case 'login':
//...
break;
case 'register':
//...
break;
}
The easiest way is to name your submit buttons unique to the form. You can also use this if you have multiple submit buttons for a SINGLE form (eg - submit and save, submit and return, submit and exit)
<input type="submit" name="action" value="Save">
<input type="submit" name="action" value="Return">
<input type="submit" name="action" value="Exit">
The $_POST array (or $_GET/$_REQUEST) will contain the key "action" with the value of the enacted button (whether clicked or not).
As a rule, I avoid passing hidden text fields, etc, that are unnecessary - simply to keep the code more clean.
So. For your application, I'd give your submit button values as such:
<form id="Form1">
<input type="submit" name="action" value="Form1">
</form>
<form id="Form2">
<input type="submit" name="action" value="Form2">
</form>
<form id="Form3">
<input type="submit" name="action" value="Form3">
</form>
You can set such an input in each form:
<input type="hidden" name="form_id" value="identifier_of_form" />
For example:
<form method="post" action="">
<input type="hidden" name="form_id" value="form_0" />
<!-- snip -->
</form>
<form method="post" action="">
<input type="hidden" name="form_id" value="form_1" />
<!-- snip -->
</form>
<form method="post" action="">
<input type="hidden" name="form_id" value="form_n" />
<!-- snip -->
</form>
It's not explicitly two forms, since credentials are intuitive enough that users are able to recognize the username/password boxes with a low cognitive load.
I actually agree with having login forms on the same page, because if you always click on continue without logging in, you are just adding an extra step for that user.
But, just because they are on the same page doesn't mean they have to both be visible. One example I found has a tab you can switch between. Sure it's an extra click for the B Case users, but it's exactly not loading a new page.
Another example here, uses the same 2 boxes but allows you to input different types of data, and the login process is handled in the back-end.
I think 2 forms are bad on the same page if you have to fill both of them out. If you're only choosing one, that is fine because it's instead giving you options, like sign-up forms, e.g.:
- https://stackoverflow.com/users/signup
- https://vimeo.com/join
- https://dribbble.com/signup?basic=true
In tasks where users need to go through a series of steps to complete a task, the key to improving the conversion or success rate is to reduce the complexity of the task, whether it is perceived or actual complexity.
Putting two forms in front of the user asks them to make a decision before they even get to assess the difficulty of the task, and puts a lot more information in front of them than what might be necessary. This is why you see lots of landing pages with large buttons asking the user to make a choice rather than putting two forms in front of them a letting them figure out what option that should choose.
I would suggest looking up topics and techniques on 'progressive disclosure' to get a better idea of the concept and see if you can apply it to your arguments.
https://pastebin.com/qxigq13B
Apologies if my wording seems kind of vague here, but here goes:
For each row of mySql data that is returned, I want to make the row data its own form, include either a select menu (or a number input) and push them (both row data and input value) into an array on another file. The issue is, if I use $_GET or $_POST, the row items won't come through, and if I were to use $_SESSION, it would only take row data from the last form without including the value of the number/select input. Included is a relevant code snippet, with the number or select fields omitted.