I have an HTML Form.

First two input fields are text. The Third input field is select with 2 options. Then again two input field as text as below :

1. Input type = text field
2. Input type = text field

3. Input select

   3.1 Option 1

   3.2 Option 2

4. Input type = text field
5. Input type = text field

Now when I press the tab key, it goes in serial order. First it is on 1. then when i press tab key cursor goes to 2. Now when I press the tab key directly it goes to 4 and skips 3. I am not able to understand why this is happening. Is there any way I can include 3 in my tab select and using down arrow I can select either option 1 or option 2.

Do suggest. Thanks.

I have an HTML Form.

First two input fields are text. The Third input field is select with 2 options. Then again two input field as text as below :

1. Input type = text field
2. Input type = text field

3. Input select

   3.1 Option 1

   3.2 Option 2

4. Input type = text field
5. Input type = text field

Now when I press the tab key, it goes in serial order. First it is on 1. then when i press tab key cursor goes to 2. Now when I press the tab key directly it goes to 4 and skips 3. I am not able to understand why this is happening. Is there any way I can include 3 in my tab select and using down arrow I can select either option 1 or option 2.

Do suggest. Thanks.

• javascript
• jquery
• html
• css

• 2 w3schools./tags/att_global_tabindex.asp tabindex – George Commented Mar 19, 2018 at 2:50
• You should not be needing tabindex, all the enabled form controls are gets in the tab order by default. Do check the html and make sure the ordering of elements is same as what you want. – Harshil Lodhi Commented Mar 19, 2018 at 2:52
• It would help to look at some code. Please post your code – Rachitta A Dua Commented Mar 19, 2018 at 2:52

1 Answer 1

Here you go with the solution using tabindex attribute

<input type="text" tabindex="1"/>
<input type="text" tabindex="2"/>
<select tabindex="3">
  <option>Option 1</option>
  <option>Option 1</option>
</select>
<input type="text" tabindex="4"/>
<input type="text" tabindex="5"/>