HTML5 Autofocus Fields

HTML5 introduced an autofocus attribute on all web form controls. The autofocus attribute sets focus on the field that has been given the attribute as soon as the page loads. Doing this allows the user to begin typing immediately.

To include autofocus in your form you just need to add the autofocus attribute to you input field and it will give you the desired effect.


<form>
  <input name="s" autofocus>
  <input type="submit" value="Search">
</form>

The above renders this:

If the browser doesn’t support the autofocus attribute, it will be ignored. So start using it today!

1 Comment

  1. I have been using the autofocus attribute on a few projects where I was lucky enough to be able to use HTML5 markup and found that it increased the conversion rate of email signups on the home page placement for a newsletter. Like your article says, it just doesn’t do anything if the browser doesn’t support it, the same goes for many of the other HTML5 form attributes. So in short, people should start using this where / if possible.

This post currently has one response. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

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