TABINDEX <i>and</i> a Couple of Other Form Tricks

Use these to jump around or read it all…

• The Command in Action
  
• Focus onLoad
  
• Lose the VALUE Text
  

As the Web gets bigger and bigger, the browsers become smarter and the commands get more and more complex.

After one of my previous DHTML tutorials, I received a letter from a reader who asked why I had begun writing my tutorials in a foreign language. “Don’t I know it,” I wrote back, “You only have to read it. I have to learn it well enough to be able to write about it.”

Today is a good day because we’re staying on the easy side of things. This is just about as simple as a tutorial gets. Yet, even though the command we’re going to learn is easy to use, it makes such a nice effect.

I speak of TABINDEX.

---

The Command In Action

OK then! Let’s see this pup in action. Below is a form. You’ll notice that the cursor is already in the first text box. I’ll tell you how I did that in a moment. Now, click the tab button on your keyboard and watch the cursor jump to the different text boxes.

Don’t lie to me. You thought that was cool. I showed the effect to a couple of programming friends of mine, as well as a couple of students, and they all immediately saw the benefits. Too often you fill out forms and the elements are nicely displayed, but they’re not in order, at least not in order of how they appear in the code.

Using the TABINDEX attribute, you can “force” the tab to jump to the next logical form element. How cool.

Here’s how I got the effect:

<FORM NAME=”joe”>
<INPUT TYPE=”TEXT” TABINDEX=”1″ VALUE=”Number One” NAME=”burns”>

<INPUT TYPE=”TEXT” TABINDEX=”3″ VALUE=”Number Three”>

<INPUT TYPE=”TEXT” TABINDEX=”5″ VALUE=”Number Five”>

<INPUT TYPE=”TEXT” TABINDEX=”6″ VALUE=”Number Six”>

<INPUT TYPE=”TEXT” TABINDEX=”4″ VALUE=”Number Four”>

<INPUT TYPE=”TEXT” TABINDEX=”2″ VALUE=”Number Two”>

</FORM>

The attribute TABINDEX is added into each of the form elements, in this case the text boxes. I then set the attributes to the numeric order I wanted the tab to follow. It works on any form element and it’s easy, easy, easy.

---

Focus onLoad

Well, we can’t leave it at that. The TABINDEX is a great attribute, but this is an HTML Goodies tutorial. It has to get difficult before we can finish.

As you know, when someone logs into a page that contains a form, the cursor does not jump to a form element right away. The user has to click on the first element in order to start filling out the form. After that, the tab key does the bulk of the work. But! Wouldn’t it be nice if you could force the focus to the first form element when the user logged into the page? Why, yes. Of course it would. That’s what I did above…and here’s how you do it:

This goes in the BODY tag:

onLoad=”self.focus();document.FORM_NAME.ELEMENT_NAME.focus()”

Even if you don’t know JavaScript, you can pretty much figure this one out just by reading left to right.

• onLoad means the following commands will be enacted when the page loads.
  
• self.focus(); indicates that the focus should be placed on something in this current page. This is a method, so the empty parentheses, (), are required. Don’t forget them.
  
• document.FORM_NAME.ELEMENT_NAME.focus() is a hierarchy statement that forces the focus to the document, then to a specific form inside the document, and then a to specific item inside the form. That focus comes in the guise of the cursor.
  

To be more specific, look at the form code above. I named the form itself “joe” and the first form element “burns”. Thus, the actual line I put into the page body command looks like this:

onLoad=”self.focus();document.joe.burns.focus()”

You’ll need to change the form and element names when you post this to your own page.