• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

HTML5 Autofocus Attribute

March 18, 2014 //  by Krishna Srinivasan//  Leave a Comment

The autofocus attribute is used for automatic focus in the input field of the form when the form page gets rendered. Prior to HTML5, we used JavaScript code to autofocus on an element. If a user tried to fill the form before the JavaScript code is loaded, then user is returned to the first element. This can be avoided now by use of autofocus attribute. This tutorial explains how to use the autofocus attribute in HTML5 with simple example.

Syntax Of autofocus Attribute

<input type="text" autofocus>

Browser Support

All major browsers support autofocus attribute. Those that don’t support, just ignore this attribute.

Example

<! DOCTYPE html>
<head>
   <title> Autofocus Attribute</title>
</head>
<body>
   <form>
      Name <input type="text"><br>
      Surname<input type="text" ><br>
      DOB <input type="text" autofocus><br>
      Residential Address<input type="text"><br>
      Phone Number <input type="text"><br><br>
      <input type="submit" value="Submit">
  </form>
</body>
</html>

Here you can see we have used autofocus attribute for the this field DOB. So when the page loads, you will see the DOB field is focused.

Example Application Test

  • Save the file as autofocus_example.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

Output

When the execution process is completed successfully we will get the following output :
HTML5 Autofocus Attribute

Category: HTMLTag: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « HTML5 Required Attribute
Next Post: HTML5 Range Input Type »

Reader Interactions

Leave a Reply Cancel 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.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact