Set Form Controls Tab Order With tabindex Attribute
By Stephen Bucaro
A form control has the focus when it's selected and ready to receive input. For example
a text box will contain a blinking cursor when it has the focus. After you type your input into
the text box and press the keyboard [Tab] key, the focus moves to the next control in the
tab order. By pressing the tab key, users can move the focus through the controls
in your form.
The default tab order is the order in which the controls appear in the html code. You may
prefer to set the tab order yourself. To set the tab order give each form element a tabindex
attribute and set their number values to the order you want the tabs to work.
In the form shown below, the controls appear in the code in the same order they appear
on the page; top to bottom. But because the tabindex of the Email Address text box
is lower than the tabindex of the Comments textarea box, the focus goes to the Email
Address text box first.
<form>
<label>Name: </label><input type="text" id="username" size="20" tabindex="1" /><br />
<label>Comments:</label><textarea columns="20" rows="5" tabindex="3"></textarea><br />
<label>Email Address:</label><input type="text" id="useremail" size="20" tabindex="2" /><br />
<input type="submit" value="Submit" /><br />
</form>
To set the initial focus, you'll need to use a bit of Java Script (at least until all browsers catch
up with HTML5. The easiest way to do this is to use the getElementById method in the
webpage's onload event. An example is shown below.
<body onload="document.getElementById('username').focus();">
Also note that the browser window controls also involved in the tab order.
More HTML Code:
• HTML Definition List
• The Font Tag
• Radio Button Basics
• The HTML Head Tag
• Checkbox Basics
• When to Use the nofollow Attribute value
• Easy Form Design
• The Heading Tags
• HTML SPAN Basics
• HTML Select List Basics
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
Follow @Stephen Bucaro
General Web Design
