Use Scripts to Improve Your Forms
9. Focus is an important part of creating useful forms. If the Web page content is just the form, then the customer should not have to do anything to begin filling out the form. That means that the focus of the page (the cursor) should default to the form field. This is done with the following relatively simple script (placed at the bottom of the page):
<script type="text/javascript">
window.onload = document.getElementById('firstField').focus;
</script>This script focuses on the HTML element with the id "firstField":
<label for="firstField">First Field:</label>
<input type="text" name="firstField" id="firstField" tabindex="1" />10. Helper text is common within forms with only one text field - it makes the form take up less space. But if the text has to be deleted by your customers it can be annoying. Use this script to select the text for them to delete:
<input type="text" name="search" id="search" value="Type in your search" onfocus="this.select()">11. Validation is the most obvious way you can improve the usability of your forms with scripts. Telling your readers as they are filling out the form that they've made an error is much easier than having to wait for the server to return a list of errors. And while an Ajax implementation for validation can be more usable than a standard JavaScript validation script, both are easier on your customers than waiting for the server to validate and return tons of error messages.
The JavaScript Guide at About.com has a lot more scripts and information on using JavaScript to improve your Web forms.
More Usable Forms are Possible
While there isn't a lot to be done about how difficult it is to write HTML forms or get them to work, but at least our customers don't have to experience as much pain. With these 11 tips, you can use XHTML tags, CSS, and Scripts to make your Web forms more user friendly and useful.
For more help with Web Usability, check out the About.com Guide to Web Usability.
