Making your forms auto-focus

One of the small, hard to notice features that I’ve encountered on a few games and grown to love is that of the auto-focusing form field. When you go to login or register, as long as your web browser has Javascript enabled, you’ll automatically be able to type into the first textbox that you need to – which makes signing up or logging in much easier.

It’s actually a very simple feature to add – all you need is three lines of Javascript:

window.onload = function() {
	document.getElementById('username').focus();	
}[php]
The HTML you need to use looks like this:

[php]<input type='text' id='username' />

And as long as you have both of those pieces, whenever a user visits the page the username input box will automatically get focused into. It’s a small and easy change to implement, and it makes a huge difference to how easy it is to use your game’s forms. For example, visit Urban Dead and Kingdom of Loathing and start typing the moment the page loads up – as you can see, on Kingdom of Loathing you’ve been focused into the text box, and can therefore just start typing to log in. On Urban Dead, you need to find the textbox, and then move your mouse over to it and click on it. It’s just not quite as nice and easy as having the field auto-selected for you.