HTML - attributes - tabindex

revision:

Content

"tabindex" attribute : specifies the tab order of an element syntax some examples

"tabindex" attribute : specifies the tab order of an element

top

The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating).

The tabindex attribute is part of the global attributes and can be used on any HTML element.

syntax

top

<element tabindex="number"></element>

number specifies the tabbing order of the element (1 is first)

some examples

top
Fox

Google

Microsoft

Note: Try navigating the elements by using the "Tab" button on your keyboard.

codes:

                    <div style="margin-left:3vw;" tabindex="1">Fox</div><br>
                    <div style="margin-left:3vw;" tabindex="3">Google</div><br>
                    <div style="margin-left:3vw;" tabindex="2">Microsoft</div>
                            
                    <p class="spec" tabindex="4"><b>Note:</b> Try navigating the elements by using the "Tab"
                    button on your keyboard.</p>
                    <script>
                        document.getElementsByTagName('div')[0].focus();
                    </script>

Click anywhere in this pane, then try tabbing through the elements.

Tabbable due to tabindex.
Not tabbable: no tabindex.
codes: 
                    <p class="spec">Click anywhere in this pane, then try tabbing through the elements.</p>
                    <label style="margin-left:3vw;">First in tab order:<input type="text"></label>
                    <div style="margin-left:3vw;" tabindex="0">Tabbable due to tabindex.</div>
                    <div style="margin-left:3vw;">Not tabbable: no tabindex.</div>
                    <label style="margin-left:3vw;">Third in tab order:<input type="text"></label>