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/mycgi.pl">
name: <INPUT NAME="realname"><BR>
email: <INPUT NAME="email"><BR>
</FORM>

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.)