Control Your Tab Order and Cursor Focus

A form control is said to have focus if the cursor is resting on it. Form controls naturally acquire focus following the sequence of their location in the HTML source code. For instance, the default values in the controls in EXAMPLE A show how the tab key would, by default, traverse the form controls left to right, then top to bottom. Most of the time, this order is the way we would want and expect the visitor to progress through the form, because that’s how the majority of the Western world reads.


But sometimes —like here— that natural order doesn’t make sense, and we might need to violate it. We would want the visitor to progress vertically down the left column before going to the top of the right, as in EXAMPLE B.


We can dictate this non-default tab order by assigning a tabindex value for each affected form element, like this:

<input type="text" tabindex="n" name="homeAddress" id="homeAddress" />

When the page loads, the cursor is initially positioned on the control with the lowest tabindex value greater than zero. The cursor then progresses through the remaining controls in order by ascending tabindex. Elements lacking a tabindex or with a tabindex of zero come last in the tabbing order, in order of their location in the document’s HTML source code. (In Internet Explorer, a negative number removes the item from the tabbing order entirely.)

HTML for the “column first” tabbing order of EXAMPLE B, with the surrounding layout table, formatting, and irrelevant attributes removed for the sake of simplicity.

Non-Standard Tabbing Order, EXAMPLE B, HTML

    <p> Street Address
      <input type="text" tabindex="1" value="1" />
      Street Address
      <input type="text" tabindex="5" value="5" />
    <p> City
      <input type="text" tabindex="2" value="2" />
      <input type="text" tabindex="6" value="6" />
    <p> State
      <input type="text" tabindex="3" value="3" />
      <input type="text" tabindex="7" value="7" />
    <p> Phone
      <input type="text" tabindex="4" value="4" />
      <input type="text" tabindex="8" value="8" />

Even if you don’t need to specify a non-standard tabbing order, you can still set focus to a specific control where you want the visitor to start initial data entry. For instance, when a visitor opens Google, the cursor is automatically positioned in the search input area, ready and waiting for the visitor to type in a search phrase. Automatically setting focus to the first form control illustrates how some thoughtful coding can save the visitor an unnecessary keystroke or mouse movement.

To set the focus upon initial page load, add the following onLoad attribute to the <body> tag, substituting your own form and field names for formName and fieldName:

<body onLoad="document.formName.fieldName.focus();">

There have been 3 comments | Subscribe to Comments | Jump to Form »


Personally I don’t recommend using the tabindex attribute because it requires to set the tabbing order to all the elements on the page.

If you build the HTML of the EXAMPLE B with good semantic, you will never need to set a tabindex value other than tabindex=”1″ to make sure to set the cursor on the first element of the page.

Good semantic integration of EXAMPLE B that suits the tabbing order without any tabindex:

<fieldset class=”first”>
   <legend>Home Address</legend>
     <li><label>Street Address</label> <input tabindex="1" … /></li>
     <li><label>City</label> <input … /></li>
     <li><label>State</label> <input … /></li>
     <li><label>Phone</label> <input … /></li>
<fieldset class=”first”>
   <legend>Work Address</legend>
     <li><label>Street Address</label> <input … tabindex=”1″ /></li>
     <li><label>City</label> <input … /></li>
     <li><label>State</label> <input … /></li>
     <li><label>Phone</label> <input … /></li>



Houpsss… I just realized that I generated a mistake in my previous comment.

There should be a tabindex=1 ONLY in the first fieldset. Sorry for this Copy-Paste mistake.



@ Martin :

Martin, I guess you missed the point. This article is actually about default tabbing order. Your codes are meaningless!

If you want to create a form like EXAMPLE A you should use tabindex for this.


Post Comment on This Article

Your e-mail address won't be published. If you simply add some value to the original post and stay on the topic, your comment will be approved.

You can use Textile parameters on your comments. For example: _italic_ *bold* bq. quated text "link text":URL — Get your own picture next to your comment with a Gravatar account.