19.11 Tab Order Control

HTML 4.0 defines a TABINDEX attribute that can be used in any of the visual HTML elements. The TABINDEX value is an integer, and it controls the order in which elements receive the input focus when the TAB key is pressed.

In Listing 19.15 we present three textfields , field1 , field2 , and field3 . Here, the TABINDEX attribute is set such that the tab order is from field1 to field3 , and then finally to field2 . The HTML page is displayed in Figure 19-27.

Figure 19-27. Repeatedly pressing the TAB key cycles the input focus among the first, third, and second text fields, in that order (as dictated by `TABINDEX` ).

graphics/19fig27.jpg

Typically, the implied tab order used by the browser is top-to-bottom, left-to-right . If a nonstandard order is important in your application, you should explicitly declare a tab order.

Listing 19.15 Tabindex.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>   <TITLE>Controlling TAB Order</TITLE> </HEAD> <BODY BGCOLOR="#FDF5E6"> <H2 ALIGN="CENTER">Controlling TAB Order</H2> <FORM ACTION="http://localhost:8088/SomeProgram"> Field 1 (first tab selection): <INPUT TYPE="TEXT" NAME="field1"  TABINDEX=1  ><BR> Field 2 (third tab selection): <INPUT TYPE="TEXT" NAME="field2"  TABINDEX=3  ><BR> Field 3 (second tab selection): <INPUT TYPE="TEXT" NAME="field3"  TABINDEX=2  ><BR> </FORM> </BODY></HTML>

Figure 19-27. Repeatedly pressing the TAB key cycles the input focus among the first, third, and second text fields, in that order (as dictated by TABINDEX ).

Listing 19.15 Tabindex.html

Figure 19-27. Repeatedly pressing the TAB key cycles the input focus among the first, third, and second text fields, in that order (as dictated by `TABINDEX` ).