Back to Top

How to use HTML5 AutoFocus attribute

html5 autofocus explained

HTML5 has added a number of new attributes, input types, and other elements and Recently we’ve checked input types and form validation in HTML5 so I thought it would be great to explain about another new attribute also.

Today I am going to share one more post for HTML5 and it is about the autofocus attribute in HTML5.

HTML5 introduced a new attribute called Autofocus. Autofocus attribute in HTML5 is mainly used to automatically focuses to that input field when the page is rendered. It allows the user to start typing without having to manually provide the focus to the element.

If you still do not get what autofocus attribute is, kindly go to Google site and perceive that the search field in the landing page already has focus. You can enter the search term without first clicking on the input field so To set the focus to the text box automatically is the autofocus feature and useful to make page interactive to the user.

As its name would suggest, This is a simple one-step pattern and easily programmed at the time of document load without waiting for the JavaScript to be loaded. Autofocus is automatically focus one particular form field.In Past, We’re using Javascript code for setting autofocus to the input field something like:

if (!("autofocus" in document.createElement("input"))) {

This is JavaScript code and it will be executed after all contents of the page loaded and it might delay the execution process of the page take time. Or we might use the tab index attribute to control the order of focus in a form and tab index 1 is by default focus on that field.

Now we can implement this with HTML5 so to implement the autofocus we just need to add one attribute to the HTML tag.You can use autofocus attribute on any of the HTML tags.Let’s see the attribute syntax:

Also Read: Canvas in HTML5

Results of the above example can check here:

They are several ways in HTML5 to write AutoFocus.In most, autofocus is used

  1. autofocus
  2. autofocus=””
  3. autofocus=”autofocus”

This attribute is supported by latest versions of Mozilla, Safari and Chrome etc all modern browsers only.It is also supported in Internet Explorer starting version 10

To Support HTML5 AutoFocus attribute to all browsers you can write following jQuery code:

$(function() {

I would say that this is very useful attribute HTML5 have.In this part of article, we learned about autofocus attribute but you can learn other topics of HTML5 from HTML5.

Comments (4)

  1. Did not understand clearly. My first visit to your website you are doing a great job.but it would be great if you provide a demo to your users,the users would better understand your tutorials.thanks

    1. Thanks for your feedbak. Will provide demo if require.

  2. pushker pandey says:

    kya baat hai .

  3. Thanks for sharing a great code.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Most Popular Posts

How To Change Database PREFIX in WordPress

Posted on 7 years ago


How to use WordPress Heartbeat API?

Posted on 3 years ago


To Swap Database Row in PHP

Posted on 7 years ago


Hello world

Updated 1 month ago

Nick Carter

In depth Understanding of Laravel Core

Updated 3 months ago


ECMAScript 6 New Features – 2

Updated 1 year ago


The Reader’s Poll – June 2015

Posted on 4 years ago


The Reader’s Poll – August 2014

Posted on 5 years ago


The Reader’s Poll – June 2014

Posted on 5 years ago


The Readers’ Poll – May 2014

Posted on 5 years ago


The Readers’ Poll – August 2013

Posted on 6 years ago