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:
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” />
And that’s it — when the page loads, the field will be automatically selected so your visitors can just start typing straight away.