What is the practical limit to the number of input elements in an HTML form?

I am developing a spreadsheet style input page that is 14 columns wide and up to 25 rows long. When any particular cell gets the focus, an additional 4 text boxes and 1 radio select with 3 options becomes available.

In other words, I have 14 columns by 25 rows which equals 350 cells. Each of these cells has 4 text inputs and 1 radio selection (with 3 options), which gives me a total of 1750 fields. There are also a few meta fields sprinkled around so 1800 is a pretty good estimation of the total fields on the form.

I have already run into some JS performance issues on older versions of IE (surprise!) as a fair amount of JS is involved in showing/hiding different fields to keep the ui usable. I think I have the JS working sufficiently well but am continuing to fine tune things.

This brings me back to my original question; what is the practical limit to the number of 开发者_运维问答input elements in an HTML form?

PS. I am not asking for options how to re-design my interface or the design of the system. I am asking a question I am curious about to get other people's experience in similar situations.

While 1800 elements is a lot, your JS is going to have a bigger influence on in-page performance. You mentioned that you've already noticed a performance hit in IE (shocker), so it would be interesting to try disabling chunks of JS to see how each effects performance (in those browsers). This process could be helpful in identifying which pieces might be causing bottlenecks on different browsers as well.

I'm guessing that you're submitting any entered data via AJAX as the user goes. If not, you may run into problems on submission.

Besides in page performance, you should probably be concerned with your doc size and page load times. It seems like your pages could get heavy pretty quickly. So the fewer fields you include on page load, the better.

As for a direct answer to your element limit question, I don't believe I've ever run into a problem with having too many (besides the page size issue). Still it feels like good practice to limit the amount initially loaded and come up with a way to deliver new rows, fields, etc as needed.

Good luck!

Assuming there's no hard bound in the DOM on any particular browser (and that would be fairly unlikely), your practical limit will vary, as you'd found, based on your browser and very much on what you're doing with all those elements.

Elements just hanging around may slow down various lookups/traversals, depending on what you're traversing, etc. Eventually depending on the browser you're looking at memory footprint issues and paging, but you'd have to be really huge numbers, well above where you are, to see those sorts of effects.

Reflows/re-renders of the document as you change things probably will increase in cost at least linearly with the number of elements on the page.