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:
1 2 3 4 5 | if (!("autofocus" in document.createElement("input"))) { document.getElementById("search").focus(); } |
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
1 2 3 4 5 6 | <form> <input type="text" name="search "id ="search" autofocus/> <input type="button" value="Search"> </form> |
Results of the above example can check here:
They are several ways in HTML5 to write AutoFocus.In most, autofocus is used
- autofocus
- autofocus=””
- 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:
1 2 3 4 5 |
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)