is there a way to use tabindex on only some fields in an HTML form?

Question

I have a set of 8 complex forms (70+ fields) for storing team reports. A section of the form has team member names in a table 4 columns wide and 2 high (first name on top and last name below). When a user fills out the form the tab key takes them across the first names, and then goes to the last names because that's the order they are in the source (first names in one TR and last names in the next TR). Obviously it would be easier for my users if the tab key went from first to last name, and then across to the next first name.

I know I can fix this with tabindex, but I really don't want to have to tabindex all the 500+ fields, just so fix these 4 fields.

Is there some way that I can tabindex just part of a form? I tried it, but it won't tab to the other fields. Is there some clever JS solution? or some way of grouping those fields so default tabbing would take me into the group, and then I could tabindex inside there?

Call me lazy if you want.. but I'm trying to save myself many hours of cutting and pasting and making mistakes.

Cheers!

Answer 1

The best you will be able to do is give all of your inputs before the name inputs the same tabIndex, which is 1 less than the first name input, and then give all of the inputs after the name inputs the same tabIndex which is 1 higher than the last name input.

<input type="text" tabIndex="1"><br>
<input type="text" tabIndex="1"><br>
...
<table>
    <tr>
        <td><input type="text" tabIndex="2"></td>
        <td><input type="text" tabIndex="4"></td>
        <td><input type="text" tabIndex="6"></td>
        <td><input type="text" tabIndex="8"></td>
    </tr>
    <tr>
        <td><input type="text" tabIndex="3"></td>
        <td><input type="text" tabIndex="5"></td>
        <td><input type="text" tabIndex="7"></td>
        <td><input type="text" tabIndex="9"></td>
    </tr>
</table>
<input type="text" tabIndex="10"><br>
<input type="text" tabIndex="10"><br>
...

I think this is what you are going for: http://jsfiddle.net/9ffWs/

It will still require you to add a tabIndex to every input but at least it's very controlled and should result in no errors.