What is the best HTML approach when form inputs are spread throughout the page?

Question

I am building a faceted search system that has inputs in a sidebar (the facets are check boxes), and an input in the header of the page (the main query box). All of these inputs are submitted simultaneously when the user submits a search.

The only way I can think of to make this work is to wrap the entire page in an HTML form tag. Something like the following pseudo-html:

<form>
  <div id='header'>
    <logo/>
    <input id='q'/>
    <!-- a bunch more stuff -->
  </div>
  <div id='sidebar'>
    <div id='sidebar-facets-subsection'>
      <input id='facet1'/>
      <input id='facet2'/>
      <input id='facet3'/>
      <!-- a bunch more stuff -->
    </div>
    <div id='sidebar-form-subsection'>
      <form id='unrelated-form'>
        <input id='unrelated-input-1'/>
        <input id='unrelated-input-2'/>
      </form>
    </div>
  </div>
  <!-- a bunch more stuff -->
</form>

This would work, except for three things:

1. I need to use other forms in the page, as I've indicated above.
2. I use different django templates to generate the header and the sidebar, making the templates have dependencies on each other.
3. It's a real mess since the sidebar is in reality about 100 lines, not three.

Is there a more clever way of doing this that I'm not aware of, or is creating huge HTML forms the norm? In circumstances like this, is it better to use Javascript to somehow generate the input entries in a more normal form? Or is that the only option?

Any creative solutions or ideas?

Answer 1

You can make it work with Javascript without sacrifying accesibility

1. Put all the checkboxes in the header and wrap them in div
2. Set up and empty but clean side bar
3. Using Javascript, move you checkboxes from the header into the side bar
4. Attach a callback to the form.submit event, and when the user submit the form, cancel the event then, take the data from the search field and the checkboxes and send it as an Ajax POST request.

Using a framework like jQuery, it's a 15 minutes job.

If the user has JS enable, the form will post the request and everything will work. If the user doesn't have javascript enable, the checkboxes will be in the header and so they will work, at just the price of a slightly less elegant design.

But people with Javascript disable are used to design changes so it's ok.

Answer 2

Use javascript to populate a hidden field with a list of this checkboxes name=value pairs on form submit and treat this in serverside code, spliting the string into an array, etc. Please note that this is not a good aprouch, since you loose accecibility to those with javascript disabled. The form tag is the only accessible way of doing so.

You can try to change the layout, if you can, swaping the checkboxes with links of buttons that filters the data, almost the way most ecommerce sites do out there.

Answer 3

I believe you have two options:

1.) a page wide form element. All "submit" buttons submit to the same form and the server-side script processes the form for all filled elements. By page wide, I'm not being literal... The related inputs all in the same form tag. Other forms are placed in other form tags.

2.) multiple forms, with a client side script which populates hidden form fields with the data from the other form before submission.

1 requires more work, but 2 may not work for every visitor.

Do consider the fact that, just because you have one form container, you don't have to necessarily display everything together for the user. Encapsulate inputs in divs and position them according to your will. It may not be easy, but it's definitely possible.