Blooper 26: Compulsory Clicking: No Default Text Input Focus

< Day Day Up >

When a form on a Web page requires users to type data, it should automatically place the text input focus in the first text field. This lets Web users start typing immediately.

If a form doesn't set a default input focus, users must move the cursor to a text field and click there before they can start typing. That isn't just an inconvenience; it violates people's expectations: They start typing and ... nothing. Their keystrokes-and seconds of their valuable time-are wasted . The impact is even worse on blind users and people who don't use a pointing device; they must first realize that the insertion point isn't set, then press the Tab key to set it. Unfortunately many designers of forms on the Web are either unaware of the importance of setting the input focus or they regard it as a minor, low-priority detail.

Examples of this blooper can be found all over the Web. The home page of IEEE.org, the website of the Institute of Electrical and Electronics Engineers, forces members to move the mouse and click in the User ID field before they can log in (Figure 4.35).

Figure 4.35: www.IEEE.org (Oct. 2002)-No text input focus is set in the User ID field when this page appears.

The blooper is especially annoying on Web pages that have only one text field, such as the home pages of TowerRecords.com, a record store (Figure 4.36[A]) and Ford.com (Figure 4.36[B]), an automobile company. Both of these pages require visitors to click in the one and only text field on the page. Many people don't know this and start typing when the page appears.

Figure 4.36: A- www.TowerRecords.com (Sept. 2002); B- www.Ford.com (Sept. 2002)-No text input focus is set in the Search field when this page appears. Users have to click in the field before starting to type.

A quick check of airline websites -United, Continental, and American (Mar. 2002)-found that none of their home pages set a text input focus. A quick check of three popular Search sites- Google, Yahoo, and AltaVista (Mar. 2002)-found that Yahoo didn't set a text input focus in the Search text field on its main page, whereas Google and AltaVista did on theirs.

Avoiding the Blooper

The need for online forms to provide a default text input focus is a well-known user-interface design guideline dating back long before the Web-even before the GUI. When a form or a page appears, users should immediately be able to start typing into the first (or only) text field. They should not have to click there first. A site that sets an input focus is Google.com (Figure 4.37).

Figure 4.37: www.google.com (Sept. 2002)-Home page sets text input focus, so users can just start typing.

One reason many website forms don't set a default text input focus is that simple HTML forms don't. If you create a form using the standard HTML <form> and <input type = text> tags, the resulting form will not have a default input focus. Setting an input focus in a text field on a Web page requires using a JavaScript or some other scripting language.

The JavaScript required to set a text input focus is not complicated; it's just a tiny amount of code. But many websites don't do it. This may be because the developers don't know how important it is. That's the reason for including this blooper in this book: to explain that it is important. Alternatively, Web developers may not know how to set a default input focus. For their benefit, the JavaScript code that does it is provided in the sidebar (Tech Talk: How to Set a Default Input Focus).

Of course, the code works only with Web browsers that handle JavaScript. Some Web developers wish to avoid JavaScript; they want their pages to be based on pure HTML. To them, I'll simply say, Please reconsider this trade-off. The amount of JavaScript required is tiny, but the benefit for users is high.

Tech Talk: HOW TO SET A DEFAULT INPUT FOCUS

Here's how to set an input focus on a Web page using JavaScript.

Suppose a page has a text field named "textField1." Include the following code in the page's <body> tag:

 onLoad="javascript:document.forms[0]. textField1.focus();"

This works with version 4.0 or later of either of the two most popular Web browsers: Netscape Navigator and Microsoft Internet Explorer. Here is sample HTML code for a page that sets a default input focus:

 <html>   <head>   <title>Text Input Focus Test</title>   </head>   <body bgcolor="white"   onLoad="javascript:   document.forms[0].name.focus();">   <form>   Name:   <input type=text name="name"   size=32 maxlength=35>   <p>   Address:   <input type=text name="addr"   size=50 maxlength=50>   </form>   </body> </html>

In websites that generate pages from templates, the site designer may not know in advance whether a particular page will contain a text field when viewed by a user. In such cases, the code setting an input focus can be placed inside conditional expressions that check whether the page has a form containing a text field by a certain name. Here is an example:

 {if (document.forms[0] && document.forms[0].search) {document.forms[0].search.focus()}}

In English, this says, if there is at least one form and that form has a field named "search," then set the input focus there. By embedding this code in the onLoad attribute of every page's body tag, Web developers can ensure that text fields named "search" on any page will have the input focus.

< Day Day Up >