The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

Usability Tip: Automatically Select Form Input Field on Page Load

A lot of web services focus on search and information discovery. Their main interaction mechanism is the search input field. What’s surprising is that many new services fail to automatically select the search field for you when the page loads, requiring their visitors to either click on it to select it or tab down to it using the keyboard.

If you visit sites like Google or Dictionary.com, the input field will be automatically focused – you just start typing and press Enter to search. Here’s a new web service I stumbled upon today called Abouthisite. Its function is to provide info on websites – things like visitors, Pagerank, i.p. address etc. It’s pretty nice, with smooth AJAX magic working in the background; but one thing that bothers me is the search field which is not preselected:

The easiest solution actually involves just one line of javascript code. Add the following code to your body tag, where “form_name” is the name of your form and “form_field” is the name of the search field you want selected:

<body onLoad="document.forms.form_name.form_field.focus()">

To clarify, your search form markup should include the names for each element like so:

<form method="get" name="form_name" action="#">
<input type="text" name="form_field" size="20" />
<input type="submit" value="Go" />
</form>

And that’s it – when the page loads, the field will be automatically selected so your visitors can just start typing straight away.

Update 22/09: 

Patrick has posted a link in the comments to a more advanced javascript that will allow visitors to use the Backspace key to go back to a previous page if the input field is empty. Here’s the link. You’re going to have to put that code into your javascript file or inside <script> tags in your page header. It also targets the field directly using an id, so make sure to assign an id to your search field. It’s a great little script.

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: