Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Tabindex attribute in Html

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 406
    Comment on it

    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)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: