Autofocus-HTML5 Form Enhancement: Input Types and Attributes

Autofocus-HTML5 Form Enhancement: Input Types and Attributes

Autofocus-HTML5 Form Enhancement: Input Types and Attributes

Autofocus

Adding autofocus to an input will automatically focus that field
when the page is rendered. As with placeholder, autofocus is something
that we’ve required JavaScript for in the past. Traditional JavaScript
methods do, though, have some serious usability problems. For example,
if a user begins completing the form before the script loads, they will
(jarringly) be returned to the first form field when the script is loaded.
The autofocus attribute in HTML5 gets around this issue by focusing as
soon as the document loads, without having to wait for the JavaScript
to be loaded. I would, however, only recommend using it for pages
whose sole purpose is the form, eg Google, to prevent the usability
issues. It is a boolean attribute and here’s how it’s implemented:

<input type=”text” name=”first-name” id=”first-name” autofocus>

This article originally appeared in issue 213 of .net magazine – the world’s
best-selling magazine for web designers and developers.