The tabindex attribute on an <input> tag specifies the keyboard tab order of the input control relative to the other controls on the page.
The tabindex value indicates when the input control can be focused.
Five input fields with tabindex values. Place the focus on the first field and tab a few times. Focused elements have a gold background.
<form>
<input type="text" tabindex="1" placeholder="First name" name="firstname"><br />
<input type="text" tabindex="2" placeholder="Last name" name="lastname"><br />
<input type="text" tabindex="3" placeholder="Email" name="email"><br />
<input type="text" tabindex="4" placeholder="Street" name="street"><br />
<input type="text" tabindex="5" placeholder="City" name="city">
</form>
The tabindex attribute assigns a tab sequence number to an input.
The actual tabindex numbers are not important. So, 30, 22, and 10 would give the same results.
The tabindex specifies the focus order of the <input> relative to the other areas or controls on the page.
This attribute indicates the sequential order of elements using the tab key.
With a negative tabindex value, the input is not reachable by tabbing but can be accessed by mouse or JavaScript.
The tabindex attribute is a global attribute that can be applies to any element.
<input tabindex="index">
| Value | Description |
|---|---|
| index | Numeric value indicating the tab order relative to the other controls. |
Here is when tabindex support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
