如何实现tab键光标只在文本框之间切换

今天写了个登录页面，因为文本框后面都有东西，所以用tab键切换的时候不能直接切换到下一个文本框。

代码如下：

<h1>用户名</h1>
<div class="tb_div">
　　<input type="text"  onblur="checkName();" id="username" class="tb" /><span><a href="Regester.aspx">注册新账号</a></span>
</div>
<h1>密码</h1>
<div class="tb_div">
　　<input type="password"  id="pwd" class="tb" /><span><a href="#">忘记密码</a></span>
</div>            
<h1>验证码</h1>
<div class="tbSmall">
　　<input type="text"  id="verfication" class="tb_small" />
　　<a href="#" onclick="ClickImg();return false;" class="ver">
　　　　<img src = "verification.ashx" style="border:0px" alt="看不清，换一张" id="verification"  />
　　</a>
</div>

　　在网上查资料之后，发现自己着实是学艺不精，input下面有个tabindex，只要依次给他们一个tabindex值即可，光标便会由小到大切换

改后代码如下：

<h1>用户名</h1>
<div class="tb_div">
　　<input type="text" tabindex='100'  onblur="checkName();" id="username" class="tb" /><span><a href="Regester.aspx">注册新账号</a></span>
</div>
<h1>密码</h1>
<div class="tb_div">
　　<input type="password" tabindex='101'  id="pwd" class="tb" /><span><a href="#">忘记密码</a></span>
</div>            
<h1>验证码</h1>
<div class="tbSmall">
　　<input type="text" tabindex='102'  id="verfication" class="tb_small" />
　　<a href="#" onclick="ClickImg();return false;" class="ver">
　　　　<img src = "verification.ashx" style="border:0px" alt="看不清，换一张" id="verification"  />
　　</a>
</div>