Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

Set Form Controls Tab Order With tabindex Attribute

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.

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268