Will Friedman
Frank Chang
Microsoft Corporation
Updated March 18, 1999
The following article was originally published in Site Builder Magazine (now known as MSDN Online Voices).
AutoComplete, a new feature in Internet Explorer 5 , speeds the collection of demographic information by making it easier to fill out online forms. AutoComplete provides a drop-down list of items that the user has previously entered in a particular text box on a Web page. When the user selects the item, it is automatically put into the field. (Of course, password fields do not work this way.)
The feature is very useful on its own, but its real power shines through when the benefit is transferred between Web sites. In the ideal situation, your users wouldn't have to retype common elements -- such as names, telephone numbers, and e-mail addresses -- because they would have already filled in this information on someone else's site. This is because Internet Explorer stores what users type in form fields in a secure, client-side store. In the Implementing AutoComplete section, I'll talk about how to make sure the right information appears in the drop-down list.
With AutoComplete, you don't need to author twice and you don't need to detect browsers. Because AutoComplete adds a new attribute to the HTML INPUT tag, older browsers, such as Internet Explorer versions 3.x and 4.0 and all Netscape Navigator browsers, will simply ignore it. You will not affect your reach at all by adding AutoComplete support. Plus, it's very simple to add AutoComplete support.
When using AutoComplete, you can keep your old field names as they were. This way, you do not have to make any changes to your server and database processes that handle the form information. All you need to do is add a new "VCARD_NAME" attribute to an input element, followed by the appropriate vCard identifier.
The original HTML
<input type="text" name="email">
becomes
<input type="text" name="email" VCARD_NAME="vCard.email">
It's that simple. With this attribute added, your form element will receive a drop-down list of the e-mail names that the user has entered on other sites. Similarly, by using other identifiers, you can collect names, job titles, addresses, and other demographic information.
vCard is a standards-based way to refer to common personal information. Each piece of data is referred to using the convention vCard.<name>. Here is a table of the names supported by the vCard schema:
vCard.Cellular | vCard.Company | vCard.Department |
vCard.DisplayName | vCard.Email | vCard.FirstName |
vCard.Gender | vCard.Home.City | vCard.Home.Country |
vCard.Home.Fax | vCard.Home.Phone | vCard.Home.State |
vCard.Home.StreetAddress | vCard.Home.Zipcode | vCard.Homepage |
vCard.JobTitle | vCard.LastName | vCard.MiddleName |
vCard.Notes | vCard.Office | vCard.Pager |
vCard.Business.City | vCard.Business.Country | vCard.Business.Fax |
vCard.Business.Phone | vCard.Business.State | vCard.Business.StreetAddress |
vCard.Business.URL | vCard.Business.Zipcode |
Here is some data to help with your decision to include the AutoComplete attribute in your forms:
The other thing you should know about AutoComplete is that you can turn it off. You should consider turning off AutoComplete for sensitive fields, such as credit card numbers, expiration dates, and other confidential data. To turn off AutoComplete, add the AUTOCOMPLETE="OFF" attribute to the input element on your field:
<input type="text" name="creditcard" AUTOCOMPLETE="OFF">
You can also disable AutoComplete for an entire form by adding the same attribute to the <FORM> element:
<FORM Method="POST" target="_main" AUTOCOMPLETE="OFF">
AutoComplete has several security features. First, data in the AutoComplete drop-down list is available to the Web page or server only after the user explicitly selects the information. Even then, only the item the user chooses is accessible via script or HTML -- just as if the user had typed in that information manually. There is no way, for example, to include a hidden form on the page that uses script to read the AutoComplete lists and transmit them to the server.
Also, users can turn off the AutoComplete feature at any time. In fact, the first time that Internet Explorer 5 suggests AutoComplete data, it asks users if they would like to activate the AutoComplete feature. If they do not, AutoComplete stays deactivated. Users can also turn AutoComplete on and off in the Internet Options.
Finally, the AutoComplete data is kept on the client in an encrypted store.
Microsoft is going to make AutoComplete data common by adding vCard support to existing forms on Hotmail registration, on the MSN Plaza, and all of the MSN sites -- including the Internet Explorer "run once" page that all Internet Explorer users of see when they install the browser. We are also promoting this feature to major portals and directories. Because of the combined reach of these sites, you can count on most users having prepopulated data already when they come to your site; you won't be the "first mover."
Also, if users have entered information in the IE Profile Assistant, this information will automatically appear in the drop down lists for the appropriate fields.
AutoComplete for forms also works across sites that use the same NAME attribute in INPUT elements. For example, if you have a field name called "EMAIL" you may already notice e-mail names being suggested in this form in Internet Exploer 5, since other sites may also call their e-mail fields EMAIL.
Finally, it's worth pointing out that AutoComplete is triggered only in HTML forms, which begin and end with the <FORM> </FORM> tags.
Will Friedman is the Strategic Partner Liaison for Internet Explorer 5, and works with top Web sites to educate them on the features and opportunities coming in Internet Explorer 5. In his spare time, he is rapidly forgetting how to play guitar.
Frank Chang is a Program Manager for the Microsoft Internet Explorer End User Experience team.