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!

Jake Bresnehan

A Front End Developer based in Sydney and the creator of Web Design Weekly.

Web Design Weekly keeps developers at the forefront of techniques and trends whilst helping them learn and grow to produce top quality code to make the web a better place for all.

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 *

Current day month ye@r *