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
<form>
<p> Street Address
<input type="text" tabindex="1" value="1" />
Street Address
<input type="text" tabindex="5" value="5" />
</p>
<p> City
<input type="text" tabindex="2" value="2" />
City
<input type="text" tabindex="6" value="6" />
</p>
<p> State
<input type="text" tabindex="3" value="3" />
State
<input type="text" tabindex="7" value="7" />
</p>
<p> Phone
<input type="text" tabindex="4" value="4" />
Phone
<input type="text" tabindex="8" value="8" />
</p>
</form>
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();">