Tabindex attribute:
User uses tab key in a webpage to navigate through interactive elements(links,input fields etc) and navigation depends upon the elements order in Html code. But with the help of tabindex attribute we can change the tab order of an element. The tabs then flow in order from lowest tabindex to highest.
And the rest of the interactive elements are given focus in the order in which they appear in the Web page.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Tabindex Attribute Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<form action="#" method="post">
<p>Name:</p>
<p><input type="text" size="30" value="" name="firstname"
title="First name" tabindex="1"></p>
<p>Address:</p>
<p> <input type="text" size="30" value="" name="add"
title="Last name of the bride" tabindex="4"></p>
<p>Last Name:</p>
<p><input type="text" size="30" value="" name="lastname"
title="Last name" tabindex="2"></p>
<p>Date of birth:</p>
<p><input type="text" size="30" value="" name="dob"
title="Date of birth" tabindex="3"></p>
</form>
</body>
</html>
In the above example the focus on input field will according to the tabindex. Using tab , it will focus in this order first name ->lastname ->dob-> address.
0 Comment(s)