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 -
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 -
<form>
<b>Your Name should be listed here : </b>
<input type="text" name="name">
</form>
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 -
<form>
..........
.... other fields .......
<b>Name with autocomplete turned OFF : </b>
<input type="text" name="name" AUTOCOMPLETE="OFF">
...................
</form>
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 -
<form AUTOCOMPLETE="OFF">
................
.... Any number of fields ......
<input type="text" name="name">
................
</form>
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">
</form>
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">
</form>
Code Demo -
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.
References
- vCard Overview - At Internet Mail Consortium (IMC), a general information about vCards.
- vCard Details - More information on vCard, the standards, the RFCs and other information on Personal Data Interchange (PDI) including vCalendar.
- More about AutoComplete on MSDN - An article about how to use autocomplete feature in MSIE. Contains links to various other articles related to autocomplete.
Author : Manish Hatwalne.