Jakarta Struts Cookbook

3.14. Setting Tab Order

Problem

You want to control the tab order of the elements on a page.

Solution

Use the tabindex attribute of the Struts html tags to sequence the fields:

<html:form action="/SomeAction">
  <table>
    <tr>
      <td><html:text property="field1" tabindex="1"/></td>
      <td><html:text property="field4" tabindex="4"/></td>
    </tr>
    <tr>
      <td><html:text property="field2" tabindex="2"/></td>
      <td><html:text property="field5" tabindex="5"/></td>
    </tr>
    <tr>
      <td><html:text property="field3" tabindex="3"/></td>
      <td><html:text property="field6" tabindex="6"/></td>
    </tr>
  </table>
</html:form>

Discussion

On most most browsers, users can use the Tab and Backtab keys to set the form input fields, buttons, and hyperlinks that have the current focus. By default, the browser changes focus from field to field in the order that the elements appear in the source HTML document. This generally equates to a top-to-bottom, left-to-right sequencing. While this default ordering works fine in most cases, sometimes you need to control the tab ordering manually. Struts provides the tabindex attribute on most tags in the Struts html tag library for manually controlling the ordering. This attribute takes a positive integer value that indicates the sequence of the element.

In the Solution, an HTML table lays out the text fields of the form in a two-column fashion. You want the user to be able to tab down the fields in the first column and then down the fields in the second column. This newspaper-style column interface ...