$ Getting focus in HTML forms Last modified: Fri Jan 28 18:37:45 2000

Getting focus in HTML forms

Typically, when a form gets loaded by a browser, none of the form's elements get the focus by default. This can be annoying for users because they have to click on one of the input elements to begin entering data into the form. And users are lazy, so we'd like to make our pages require as few body movements as possible.

Two Methods for Form Focus'ing and Navigation

There are two main ways to make form navigation easy: using JavaScript to give input elements the focus and using the tabindex tag to specify the order that a form will be tabed through. Since JavaScript isn't a standard, it's note the ideal solution. But we'll shy away from standards utopia just long enough to make forms a little more useful.

JavaScript focus()

Calling focus() is easy. First, give your form a name plunking a name tag into form tag,e.g.,

<form action="/cgi-bin/beaver.cgi" name="form1">

Then, call focus() on the form element like in the example below (also used in the Examples),

<script language="javascript">
<!--
document.form1.Element1.focus()
//-->
</script>

(Assuming you have a form element named Element1, e.g., <input type="text" name="Element1">)

Where form1 is the name of the form and Element1 is the name of the input box. The script should appear after the form.

HTML 4 tabindex

HTML 4.0 allows you to specify a tabindex that dictates the order to tab through forms. So you could specify that such-and-such element is first, then, when TAB is pressed, such-and-such other element is jumped--or tabed--to.

To specify the tabindex, insert a tabindex tag into your input element and assign it a value from 0 to 32767. For example,

<input type="text" name="Element1" tabindex="0">
<input type="text" name="Element2" tabindex="1">

When the user pressed TAB while the focus is inElement1, the cursor will change focus to Element2

Example Forms

These forms test focus() and tabindex in forms. But, as always, you never know which browsers will support this "standard." Be sure to test tabindex and focus() before you start going bonkers with it in your pages.

Here, we've got a form that's tabindex'ed from top to bottom,

Rendered Code 


    <form action="/cgi-bin/beaver.cgi" name="form1">
    <input type="TEXT" name="Element1" size="10" value="First Tab" tabindex="0">
    <input type="TEXT" name="Element2" size="10" value="Second Tab" tabindex="1">
    <input type="submit" name="submit_beaver" value="Submit" tabindex="2">
    </form>
    <script language="javascript">
    <!--
    document.form1.Element1.focus()
    //-->
    </script>

(As usual, Netscape doesn't seem to be taking care of elements in tables correctly. When I open this form in Communicator 4.04/Linux, the call to focus does not work. However, if I take the form out of the table, Element1 does load focused.)

Here's a form that jumps around (non top-down),

Rendered Code 



    <form action="/cgi-bin/beaver.cgi" name="form2">
    <input type="TEXT" name="Element1" size="10" value="First Tab" tabindex="0">
    <input type="TEXT" name="Element2" size="10" value="Sixth Tab" tabindex="5">
    <input type="TEXT" name="Element1" size="10" value="Fifth Tab" tabindex="4">
    <input type="TEXT" name="Element2" size="10" value="Fourth Tab" tabindex="3">
    <input type="TEXT" name="Element1" size="10" value="Third Tab" tabindex="2">
    <input type="TEXT" name="Element2" size="10" value="Second Tab" tabindex="1">
    <input type="submit" name="submit_beaver" value="Submit" tabindex="7">
    </form>

Other Resources and References
Contact Coté| Coté HomePage / HTML Articles / Getting focus in HTML forms