Home page
or browse popular tags

Sign up for the free email newsletter for new tips, tutorials and more. Enter your email address below, and then click the button.

Privacy Policy

RSS Twitter

How to Control Tab Order in HTML


All elements (except hidden elements) in the HTML form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute.

Have a look at the example:

  <title>Controlling TAB Order</title>
    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 />

The tabbing order begins with elements with explicit tabindex values, starting from the lowest to the highest numbers. Same-valued tags get tab-selected in the order in which they appear in the document. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form.

The tabindex attribute can also be used with <a>, <textarea>, <select>, and <button> elements.


Add To: Add to dzone dzone | Digg this digg | Add to del.icio.us del.icio.us | Stumble it stumbleupon

  • Comments

Copyright © 2005-2023             www.WebCheatSheet.com All Rights Reserved.