H4 Example 1: Creating a logical tab order through links, form controls, and objects

A genealogical search form searches for marriage records. The search form includes several input fields for the bride and the groom. The form is marked up using a data table that includes the fields of the groom in the first column and the fields of the bride in the second column. The order in the content is row by row but the author feels it is more logical to navigate the form column by column. This way, all the groom's criteria can be filled in before moving on to the bride's criteria. The tabindex attributes of the input fields are used to specify a tab order that navigates column by column.

Search for marriage records
Search criteria Groom Bride
First name
Last name
Place of birth