Best Practice: Multiple Forms

Question

Is it considered best practice to have multiple forms in an HTML document when each of those forms performs a different action? Here's what I'm doing: I am making a search page that will query my database with several differently formulated SQL queries. This page has three types of search, and each type of search has a simple and an advanced mode. At present, I use javascript to hide all of the forms except the one that is active, and I keep each mode of a search separate from each other in their own forms because I handle them differently. When the search button is clicked, the results of the search will be posted on the same page below the search forms.

So, is it generally considered to be best practice that one would do this with multiple forms (which makes it easier and more modular in it's structure) or should I simply hide and un-hide elements inside of one complex form?

Answer 1

Is it considered best practice to have multiple forms in an HTML document when each of those forms performs a different action?

answer: Only if those forms go to separate URLs.

Here's what I'm doing: I am making a search page that will query my database with several differently formulated SQL queries. This page has three types of search, and each type of search has a simple and an advanced mode. At present, I use javascript to hide all of the forms except the one that is active, and I keep each mode of a search separate from each other in their own forms because I handle them differently. When the search button is clicked, the results of the search will be posted on the same page below the search forms.

Possible example of repeated code, from your vague description:

<form id="search-type-1" action="/search-engine" method="post">
    <input type="checkbox" name="advanced-mode" /> - Advanced
    <input type="text" name="query" />
    <div class="options">
        Put advanced options here.
    </div>
</form>
<button id="submit-button">Search</button>
<div id="search-ouput"></div>

So, is it generally considered to be best practice that one would do this with multiple forms (which makes it easier and more modular in it's structure) or should I simply hide and un-hide elements inside of one complex form?

Answer: This seems overly complex. I would say this is NOT best practice. With more info, I'm sure someone could show you a much better way.

Answer 2

It is considered best practice to present forms on the page such that their purpose is intuitively obvious, they are easy for the visitor to use, they have good affordance, and (imo) they look well on the page. This question invites lots of contradictory opinions, but it could be (yeah, surrrrrre!) that everyone can agree on those four points at least.

Lots of folks can say "well, it's better to float this left" or "use a <ul> here" or "why position:fixed;?" IMO, these concerns are all way, way less important than the visitor's reaction to the finished page.