The data entry can easily be made fast if we can put the user’s cursor in the first field on the form. HTML5 has a awesome and very brief solution of this issue.

We can use autofocus attribute to any form field as shown below –

<input type = "text" name = "first_name" autofocus id = "fname">

The browser will position the user’s cursor to the ‘autofocus’ field and will result in better user experience.

Point to be noted here is, we can have only one ‘autofocus’ field in a page. Otherwise, the browser will position the cursor onto the last autofocused formfield.

Now the question comes, What to do if my browser does not support this ‘autofocus’ thing???

Nothing to worry… in that case, just include the following javascript code on your page, and the life will be easier

function hasAutofocus(){
      
         var element = document.createElement ( 'input' );
         return 'autofocus' in element;
}
 
$(function(){
 
         if ( !hasAutofocus() ){
                  $( 'input[autofocus = true]' ).focus();
         }
});

 
Or you can select the field by jQuery and manually focus to it.