What is autocomplete?

Autocomplete feature is introduced by Microsoft in their web browser Internet Explorer (IE) since IE version 5. In the earlier version, it was limited to the auto completion of web addresses that you type in the browser's address bar. The later versions of IE included autocomplete support for various form elements including email addresses and passwords. If enabled, autocomplete feature lists possible matches for the entries you have typed before in the web based forms. It can be enabled or disabled from Tools » Internet options » Content » AutoComplete. As a user, you can enable (turn ON) or disable (turn OFF) autocomplete feature for web addresses, forms and user names & passwords on forms. You can also delete previous autocomplete entries/values of these things. To delete an individual value, select it from the drop-down list for that field, and press delete.

If you have enabled autocomplete feature in your Internet Explorer, and if you have already typed your name in one of those web based forms (you must've done this several times!), you should see the name(s) listed in the drop-down box just below the input box, as you start typing -
Your Name should be listed here :
This is achieved without adding any additional code, as name of the input field happens to be name, which is common for web based forms. The HTML code for the form shown above is as follows -
	<b>Your Name should be listed here : </b>
	<input type="text" name="name">
As you can see in the code, the input tag shown in bold does not require any additional coding. If the user has already typed the value of the field before, those values will be available here (values of field "name" in this case). This is very convenient for a user when he has to enter his name, email address in various web based forms time and again. Also, this proves very useful for a web developer because there is a lesser probability of incorrect information due to typographic error from the user end. Except in case of shared computers, most users would want to keep this feature on to ensure less wear and tear to their fingers and keyboards.

Can I turn autocomplete ON/OFF programmatically?

As a web developer you *can not* turn this feature ON programmatically if the user has turned it OFF. That is not allowed, and thou shalt not do it anyway! There's this thing called - respecting user privacy. As a user however, you can turn it ON and OFF as explained above.

However, if needed, a web developer can turn this feature OFF either for a particular field or for the entire form. You may want to do this in certain situations. Consider this - while user registration, you have created a random sequence of characters, and you want the user to enter the character sequence manually just to ensure that automated registration is prevented. In such a case, you do want to keep autocomplete OFF for that particular field. Let us see how to do this -

Autocomplete OFF for a single field -
This may be needed in a case explained above. You can use it for as many input fields as you require, but each one of them needs to use attribute AUTOCOMPLETE="OFF" to ensure that possible matches for that field are not listed. You can do this using the code below -
	.... other fields .......
	<b>Name with autocomplete turned OFF : </b>
	<input type="text" name="name" AUTOCOMPLETE="OFF">
Autocomplete OFF for the entire form -
You may want to do this when a large number of users use a single shared computer, in such a case, listing possible matches is neither desired nor useful. When autocomplete feature is turned OFF for the entire form, all the input fields of that form will have their autocomplete turned OFF. None of them will list possible matches. Yahoo mail turns off the autocomplete feature for their web based mail. This is done as follows -
	.... Any number of fields ......
	<input type="text" name="name">
Code Demo -

This is a form with autocomplete turned OFF for the entire form. None of these fields should list possible matches.

Name : 		
E-Mail :	

Autocomplete entries/values

Despite this very convenient autocomplete feature, life could have been still very difficult for a web developer while authoring a simple HTML form. Consider this situation - A server side program/script is written by another person, and in his infinite wisdom, he has written a program which requires the HTML form to post 4 fields to the server side application. The HTML form requires to post first name, last name, email and country of the user. However, the form must post it as filed_1, field_2, field_3 and field_4. Obviously, the person who wrote this program hasn't heard of good programming practices, code readability and other such things, or may be, he just took "What's in a name?" statement of Shakespeare a bit too seriously. Practically, it may happen that the person who wrote that code may have his variable names in a non-english language, which would still pose the same problem.

On the other hand, you would definitely want your user to take advantage of the autocomplete feature if his browser supports it. Fortunately, you can still make those autocomplete entries/values available to the user while retaining those "strange" variable names. To understand how to do this, let us see how these autocomplete entries/values are stored.

The autocomplete entries/values are encrypted and stored on the user's machine using vCard. vCard provides an electronic business card format, which allows individuals to identify themselves without restating or rekeying the information. The vCard specification defines a format for recording information about a person, such as their name, address, telephone number, and e-mail address. Any of these standard vCard values can be made available for a particular input field though it may have a different name. Using this, it is possible to make a list of possible matches for that particular field available to the user. However, it is important to understand that this is just similar to having a default autocomplete feature. This, by no means is a security concern. Using this, it is *not* possible to obtain user's email address without user entering and sending it. The user still need to make the selection from the drop-down list and has to send it. This simply allows a web developer to take advantage of IE's autocomplete feature, although his input field may have a very uncommon name.

To make the list of possible matches available to the user for a particular field, you must specify which value (such as first name, email etc.) should be available for that particular input field. This is specified by the vcard_name attribute of the HTML input element. e.g. - vcard_name="vCard.Home.City" will make value of user's city available to the user while he is typing in that particular field. Possible values of the vcard_name attribute are listed in the table given below.

Using vCard

Let us consider the same example that we have seen earlier. Assume that the HTML form needs to post first name, last name, email address and country of the user to a third party server side applications as field_1, field_2, field_3 and field_4. Let's write the partial HTML form to accomplish this task which will also take advantage of the autocomplete feature of IE. Here is the code -
<form action="some-url-here" method="POST">
  First Name :   <input type="text" name="field_1" vcard_name="vCard.FirstName">
  Last Name :    <input type="text" name="field_2" vcard_name="vCard.LastName">
  Email :        <input type="text" name="field_3" vcard_name="vCard.Email">
  Country :      <input type="text" name="field_4" vcard_name="vCard.Home.Country">
Code Demo -
First Name :    (field_1)
Last Name :     (field_2)
Email :         (field_3)
Country :       (field_4)

The code demo essentially uses the same code which is listed above it. It demonstrates the use of the code in your browser, provided that you are using Internet Explorer with autocomplete turned ON. (You may also need to have the required vCard values in your profile). As exemplified here, the fields can make the vCard values available to the user using vcard_name attribute, irrespective of the field's real name. The vcard_name attribute can only be applied to input elements with type "text" or "password". But as you would expect, applying it to type "password" is not of very useful.

vCard names & Netscape

vCard is a registered trademark of the Internet Mail Consortium, and it is not MS Internet Explorer specific. New generation Netscape browser also supports vCard, and so does few other mail clients. When I tested this code with Netscape 6.1, I found that if those vCard values are already available, you can use enter those values in the fields by simply double clicking in the input box. You can view/edit values in Netscape (6.x) from - Edit » Preferences » Privacy and Security » Forms. Netscape however, does not show a drop-down list just below the input box. You can view a list of values for a particular field in Netscape by - Edit » Prefill Form. IMHO, Netscape's autocomplete feature is not really as intuitive and as convenient as that of Internet Explorer's autocomplete feature.

Also note that the attribute AUTOCOMPLETE="OFF" only works with IE, and will not have the desired effect in Netscape. The values will still be available to the Netscape user though you might have turned autocomplete OFF for that particular input field or for that entire form. Rest of the discussion here essentially applies to Internet Explorer only.

vCard names & their contents

vCard Name What it means
vCard.FirstName First Name
vCard.LastName Last Name
vCard.MiddleName Middle Name
vCard.DisplayName Displayed Name
vCard.Gender Gender
vCard.Email E-mail address
vCard.Home.StreetAddress Personal Address : Street Address
vCard.Home.City Personal Address : City
vCard.Home.State Personal Address : State
vCard.Home.Country Personal Address : Country
vCard.Home.Zipcode Personal Address : Zip Code
vCard.Home.Phone Personal Address : Phone Number
vCard.Home.Fax Personal Address : Fax Number
vCard.Cellular Cellphone Number
vCard.Pager Pager Number
vCard.Homepage Personal Homepage URL
vCard.JobTitle Job title/ Designation
vCard.Department Department
vCard.Office Office
vCard.Company Company's Name
vCard.Business.StreetAddress Business/Company Address : Street Address
vCard.Business.City Business/Company Address : City
vCard.Business.State Business/Company Address : State
vCard.Business.Country Business/Company Address : Country
vCard.Business.Zipcode Business/Company Address : Zip Code
vCard.Business.Phone Business/Company Address : Phone Number
vCard.Business.Fax Business/Company Address : Fax Number
vCard.Business.URL Business/Company Website - URL
vCard.Notes Notes

Undocumented Tip

If the value you want to make available to the user in the autocomplete list is not listed in the standard vCard names above, it can still be made available to the user using this code. Let's say you have a search input field with field name field_1 due to some strange reasons. And you still want to make all the previous search values available to the user using autocomplete, this can be done as shown in the code below -
<form action="some-url-here" method="GET">
	Search : <input type="text" name="field_1" vcard_name="search">
Code Demo -
Search : (field_1)

If you have used search engine before with autocomplete turned ON, this input box should list all the search terms below it. I recently found this little hack, and haven't yet seen it being documented anywhere, so thought I should just include this small tip. Using this, you can almost make any value available to the user.


Author : Manish Hatwalne.