Automatically Putting the Cursor in a Field

This page demonstrates a technique for automatically putting the cursor into an input field as soon the page is loaded.

Let's suppose you want the user to go directly to the following form. Notice that we set the names for the form and the field.

<FORM NAME="MyForm" ACTION="../cgi-bin/">
name: <INPUT NAME="realname"><BR>
email: <INPUT NAME="email"><BR>

We can set the focus immediately by adding an onLoad attribute to the <BODY ...> tag. Notice that the word focus must be followed by open and close parentheses: ():

<BODY onLoad="document.forms.MyForm.realname.focus()">

It's worth taking moment to consider if it's such a such a good idea to set the focus to a form field immediately. I'm always hesitant to change the default behavior of the browser. However, in some situations it makes sense, such as if your form is in a popup-window and there is little else in the popup to interact with. (See Popup Window Tutorial for more details on popups.)

About the Author
Copyright 1997-2002 Idocs Inc. Content in this guide is offered freely to the public under the terms of the Open Content License and the Open Publication License. Contents may be redistributed or republished freely under these terms so long as credit to the original creator and contributors is maintained.