How to create the tabbing order of an element in HTML?

HTML Web Development Front End Technology

tabindex is a global attribute that enables an HTML element to get focused in a sequential keyboard order (usually using the TAB key of keyboard). In order to function in an accessible manner, it requires a value of 0, a negative number or a positive. The tabindex attribute can be applied to any of the html element.

Syntax

<element tabindex = "number">

Following are the examples…

Example

In the following example we used base URL = https://www.tutorialspoint.com/index.htm to which all other relative links will treat as starting URL.


<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         text-align:center;
      }
      h1 {
         color:green;
      }
      a {
         text-decoration:none;
      }
   </style>
</head>
<body>
   <h1>Press TAB To Navigate</h1>
   <a href="https://www.tutorialspoint.com/index.htm" tabindex="2">TUTORIALSPOINT</a>
   <br>
   <a href="https://www.youtube.com//" tabindex="1">
      YOUTUBE
   </a>
   <br>
   <a href="https://www.google.com//" tabindex="3">
      GOOGLE
   </a>
</body>
</html>

Output

On execution ,the output with different links mentioned with names gets displayed. We use tab to navigate between them and we have mentioned different tabindex.

Example: Using Javascript

Now let us see an example of this using JavaScript −


<!DOCTYPE html>
<html>
<body>
   <div tabindex="1">Tutorialspoint</div><br>
   <div tabindex="3">Google</div><br>
   <div tabindex="2">Microsoft</div>
   <script>
      document.getElementsByTagName('div')[0].focus();
   </script>
   <p tabindex="2"><b>Note:</b>press "tab" to navigate.</p>
</body>
</html>

Output

On executing the above script, the tabindex gets activated and helps us navigate between the names .

Using Form action

In this case, we create a form and submit the values. The input is taken in each text box specified. Here, tabindex is used to order the sequence of inputting the values in the form.

Example

As shown in the following example, the input is taken from the four text boxes filled in the order of tabindex = 1, 3, 4, 6.


<!Doctype html>
<html>
<body>
   <form action="#" method="post">
      <table summary="the first column contains the search criteria of the groom, the second column the search criteria of of the bride">
         <caption>Search for marriage records</caption>
         <tr>
            <th>Search criteria</th>
            <th>Groom</th>
            <th>Bride</th>
         </tr>
         <tr>
            <th>First name</th>
            <td><input type="text" size="30" value="" name="groomfirst" title="First name of the groom" tabindex="1"></td>
            <td><input type="text" size="30" value="" name="bridefirst" title="First name of the bride" tabindex="4"></td>
         </tr>
         <tr>
            <th>Place of birth</th>
            <td><input type="text" size="30" value="" name="groombirth" title="Place of birth of the groom" tabindex="3"></td>
            <td><input type="text" size="30" value="" name="bridebirth" title="Place of birth of the bride" tabindex="6"></td>
         </tr>
      </table>
   </form>
</body>
</html>

Output

On running the above code, we come up with a table of marriage search records and the tabindex gets activated and allows us to navigate.

Yaswanth Varma

Updated on: 05-Sep-2022

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started