Tip 6Jumping to the First Field with Autofocus

You can really speed up data entry if you place the user’s cursor in the first field on the form when the page loads. Many search engines do this using JavaScript, and now HTML5 provides this capability as part of the language.

All you have to do is add the autofocus attribute to any form field:

html5_forms/autofocus/index.html
 
<label​ for=​"name"​​>​Name​</label>
 
<input​ type=​"text"​ name=​"name"​ autofocus id=​"name"​​>

You don’t need to say autofocus="true" or autofocus="autofocus". If the autofocus attribute is present, the browser will apply the feature.

You can have only one autofocus attribute on a page for it to work reliably. If you have more than one, the browser will focus the user’s ...

Get HTML5 and CSS3, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.