HTML <input> tabindex Attribute

The tabindex attribute on a <select> tag specifies the keyboard tab order of the dropdown control relative to the other controls on the page. The tabindex attribute indicates when its dropdown control can be focused.



A <select> and other controls with tabindex values. Place the focus on the first field and tab a few times. Focused elements have a  gold  background.

<form action="/tutorial/action.html">
  <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 />
  <select tabindex="4" name="country">
    <option value="">-- Select country --</option>
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="nl">Netherlands</option>
    <option value="es">Spain</option>
    <option value="it">Italy</option>
  </select><br />
  <input type="submit" tabindex="5" value="Submit">

Code explanation

The tabindex attribute assigns a tab sequence number to a select.

The actual tabindex numbers are not important. So, 30, 22, and 10 would give the same results.

Using tabindex

The tabindex specifies the focus order of the <select> 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 select 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.

With focus on a <select> press the spacebar to dropdown the list of options.


<select tabindex="index">



Value Description
index Numeric value indicating the tab order relative to the other controls.

Browser support

Here is when tabindex support started for each browser:

1.0 Sep 2008
1.0 Sep 2002
1.0 Aug 1995
1.0 Jan 2006
1.0 Jan 2003

You may also like

 Back to <select>