Working with Internet Explorer’s AutoComplete

Use these to jump around or read it all…

If you’ve stopped by this tutorial, then you most likely know what I mean by Microsoft Internet Explorer’s AutoComplete. It’s a rather nice function that Microsoft has put in its browsers 5.0 and above to help you out when you’re filling out forms. I love the silly thing. I use it a great deal, but I’ve always wondered how it worked.

After reading up on it, I found not only how it worked, but also how I could use it to my advantage. Here are the basics. Most of it is factual information from the Microsoft company pages.

How It Works (Basically)

When you enter information into a form and submit it, Internet Explorer sets up what’s known as a vCard. The reason the function is so successful is that Web authors tend to use the same NAME attributes for many form elements across pages.

For instance, I’ll bet you’ve filled out a ton of forms that ask for your name. Allow me to demonstrate. Type the first few letters of your name in the text box just below. If you’re using IE 5.0 or above, I’ll bet your name appears as a choice you can make. Try it in the e-mail box, too. I’ll bet you get your e-mail as a choice. It won’t work for everyone, but I’ll bet I get the majority of you:

If it worked for you, and I’ll bet it did, you’re probably wondering how I knew each item would come up. Well, first off, here’s the code from the form above:

<FORM>

Name: <INPUT TYPE=”text” NAME=”name”>

E-mail: <INPUT TYPE=”text” NAME=”email”>

</FORM>

It’s the NAME attribute that does the trick. I’m basically making a guess that sometime, somewhere, you filled out a form that asked for your name and e-mail address. In addition, I am guessing that the form used the NAME attributes “name” and “email”. They are very common.

If it worked, then you have a couple of vCards on your system named “VCARD_NAME” and “VCARD_EMAIL”. When you filled out the other form and submitted it, the card was created. Now, from that point on, whenever you run into a form that has an element with a NAME attribute set to “name” or “email,” the text from that vCard will be suggested to you.

Let me attempt to prove that point again. Below is a form that looks exactly like the one above, except the first text box has its NAME attribute set to “griswald” and the second set to “ookook”. Go ahead, try to put your name and email in. You’ll get no help from AutoComplete.

You didn’t get any help because you don’t have VCARD_GRISWALD or VCARD_OOKOOK on your computer. Luckily, I didn’t give you the opportunity to submit the form, or you would have.