[Fixed]-What is the best HTML approach when form inputs are spread throughout the page?

by

4đź‘Ť

âś…

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.

👤Bite code

3đź‘Ť

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.

👤Ricardo Souza

1đź‘Ť

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.

👤stslavik

Leave a comment