Home page
 
 Home 
 ASP 
 PHP 
 SQL 
 HTML 
 JavaScript 
 Search 
 Contact 
 
Search
or browse popular tags
Subscription

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

Print

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:

<html>
<head>
  <title>Controlling TAB Order</title>
</head>
<body>
  <form>
    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 />
  </form>
</body>
</html>

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.

 
 



Tags:

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

  • Comments





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