Article
About the Author
Simon Willison
Simon is a seasoned Web developer from the UK, currently working in Lawrence, Kansas. He specializes in both client- and server-side development, and recently became a member of the Web Standards project. Visit him at http://simon.incutio.com/, and at Stylish Scripting: SitePoint's DHTML and CSS Blog.
Simon Willison has written 4 articles for SitePoint with an average reader rating of 8.8.
SitePoint's DHTML & CSS Column
Simple Tricks for More Usable Forms
Web developers loathe the task of building forms almost as much as users loathe having to fill them in. These are both unfortunate facts of the Web, but some smart JavaScript and intelligent CSS can go a long way to remedying the situation. In this article, I'll introduce a number of simple tricks for improving the usability of forms, and hopefully inspire you to improve on them and create your own.
I'm going to start off with some simple tricks, before introducing the interesting stuff later on. If the material seems too simple for you, feel free to skip ahead.
It's the Little Things that Count
You will certainly have encountered our first trick before; it's used by Google, the world's most popular search engine. Whenever you load up www.google.com, your cursor jumps straight to the search box, ready for you to enter your query. It happens so fast you may not even have thought about it, but, in fact, it works equally well in any situation in which the primary purpose of a page is to fill in a form. It can be done in a number of different ways, each of which assumes that the form element you want to focus on has an id attribute set to "myfield":
<body onload="document.getElementById('myfield').focus()">
This is, more or less, the method used by Google. It's short and to the point. It does, however, require the addition of an onload to your body element, which some people find unsightly.
<script type="text/javascript">
window.onload = document.getElementById('myfield').focus;
</script>
This can be added to any point in your HTML file, or hidden away in an external script. If you're going to be using a lot of JavaScript on a page, it can make sense to move it all in to an external script file in order to keep the JavaScript code separate from your HTML. This method has the disadvantage that you can only assign one thing to the window.onload event at a time.
<script type="text/javascript">
addEvent(window, 'load', function() {
document.getElementById('myfield').focus()
});
function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;
}
}
</script>
This uses Scott Andrew's addEvent function, which I discussed in my previous article. This is probably the best approach to take if you're keeping your code in a separate file, as it will allow other functions to be attached to the onload event as well.
<script type="text/javascript">
document.getElementById('myfield').focus();
</script>
The above will only work if it is placed in the HTML source code some point after the input field. This can be useful if you are working with a server side templating system that makes it difficult to add code directly to the top of a document -- for example, if you are including the top part of the page using a server side include.
The above four options are available for most of the tricks I'll demonstrate in this article. For future tricks, I'll demonstrate the method using inline attributes such as onload and onclick only, but you should be aware that there are several ways to skin this particular cat.
If you liked this article, share the love:
Learn more with easy-to-understand SitePoint books
Sponsored Links
Download sample chapters of any of our popular books.
