HTML Tabindex and Accesskey

The tabindex and accesskey attributes are very useful on forms, as they help users with disabilities or users who don’t use the mouse to navigate. The tabindex takes a integer value and the accesskey takes a letter. Different browsers have their own way of using accesskeys.


<label for="name">Name:</label><input type="text" id="name" tabindex="1" accesskey="n"/>


When you hit the tab key on your keyboard the field will automatically get focus, and if you hit ALT+N you will be taken directly to the field. (ALT+N is for Google Chrome, Safari and Internet Explorer only; for Firefox press ALT+SHIFT+N.)

Example 2

<label for="name">Name:</label><input type="text" id="name" tabindex="2" accesskey="m"/>
<label for="age">Age:</label><input type="text" id="age" tabindex="3" accesskey="a" maxlength="2"/>
<label for="streetname">Street Name:</label><input type="text" id="streename" tabindex="4" accesskey="s"/>
<label for="houseno">House No:</label><input type="text" id="houseno" tabindex="5" accesskey="h"/>


AccessKey = M
AccessKey = A
AccessKey = S
AccessKey = H