iOS Safari HTML form next/previous buttons - how do they work?

OK all these are my errors but it might help someone, so here goes.

The next/previous order does seem to be directly related to the tabindex attribute, with no strings attached.

However to my error, tabindex starts at 1 not 0. http://www.w3schools.com/tags/att_global_tabindex.asp. So for Form 2, it started at 1, then 2, then 0.

I was using knockoutjs to bind the tabindex attribute to the $index() of an observableArray item that represented each field and field value, which made the error harder to spot. So I had to change it to $index() + 1.

For the radio buttons, the index was being taken from the collection of options, not the parent, so I had to use $parentContext.index() + 1 for those (see here: https://stackoverflow.com/a/11013401/1061602).

Attempting the same approach for flip switches doesn't seem to do anything.

The completely erratic form was because there was another form still existing on the DOM that had tabindex attributes set to a similar set of values, so it is tabbing between the two forms in turn. The easiest solution for me was to hide the existing form, see here: https://stackoverflow.com/a/5494043/1061602.

The commonality between Form 4 and Form 5 was also that they had the same tabindex (6) however this was a red herring. Still investigating why the last select field is skipped in Chrome - however on iOS Safari it works as expected, so problems solved!!