Using AutoComplete in HTML Forms

Note  As of December 2011, this topic has been archived and is no longer actively maintained. For more information, see Archived Content. For information, recommendations, and guidance regarding the current version of Windows Internet Explorer, see Internet Explorer Developer Center.

HTML forms are a key component to exchanging information between a user and the server. They are common in most visual programming languages, and are used in a variety of implementations on the Web. For example, forms allow users to perform tasks such as searching a Web site, providing feedback, or placing an order.

Microsoft Internet Explorer 5 and later includes an integrated feature called AutoComplete, which helps users quickly enter information into form fields. The AutoComplete innovation in HTML forms safely stores information entered into INPUT_text and INPUT_password fields. When a user submits a form, the name, value, and domain of the form component are encrypted for safekeeping. Storing the information helps users to complete single-line text fields. The next time that user visits a Web page and begins typing in a text field with the same name, the autocomplete attribute prompts an AutoComplete box to appear, providing the user with a list of previously used data.

An AutoComplete box is the primary interface for presenting data to the user. Until an entry in the AutoComplete box is selected, the data remains on the user's computer and is never accessible to a Web site.

Advantages of AutoComplete in HTML Forms

AutoComplete in HTML forms provides the following advantages:

  • Information is stored on the user's computer.
  • User experience is simplified by helping the user fill out forms.
  • User information remains secure. While users can see their private information on a Web site, a Web site cannot see the list of personal information until one of the stored values is selected and the field is filled in.

AutoComplete is an easy feature to incorporate into Web sites, and it provides a nonintrusive advantage for Web authors and users. For instance, when the user begins typing in an INPUT type=text field, the AutoComplete box presents a list of suggestions. The list of suggestions is saved in an encrypted store on the user's computer and is not accessible to Web sites. Because the user interface is integrated with the browser, it is streamlined with the Web page and transparent to the user. Individual Web sites do not need to make any changes to their content to use AutoComplete.

AutoComplete encrypts data for the AutoComplete box in a primary data store based on the NAME attribute of the INPUT type=text element. The information is shared among sites that include INPUT type=text elements with the same NAME attribute. Web authors do not have to change the NAME attribute of the field to select what data is displayed by AutoComplete. Instead, the author can use the VCARD_NAME attribute, which sets or retrieves the vCard value used by AutoComplete. vCard is a standards-based way to refer to common personal information.

The AutoComplete box appears discretely so as not to obstruct the view of the form. When the box is open, users can select information from the AutoComplete store. For example, a text field for a user's first name produces a list of previously submitted names.

AutoComplete Screenshot

The information is provided from previously submitted field values. It is specified through the vCard schema using the VCARD_NAME attribute, and this allows form fields to be completed without ever typing in a character. The vCard schema is created from the values specified in the Profile Assistant. The vCard schema is implemented when a Web site specifies one of the possible values that correspond to information in the Profile Assistant. The Profile Assistant can be accessed from Internet Explorer by choosing Internet Options on the Tools menu, selecting the Content tab, and then clicking the My Profile button in the Personal Information section.

The AutoComplete box appears when the following circumstances occur:

  • When the first character is entered.
  • When the INPUT type=text element contains fewer than two characters.
  • When the INPUT type=text element has focus and the user presses the down arrow.
  • When the INPUT type=text element has focus and is clicked.

If the VCARD_NAME attribute is present, the AutoComplete box includes any information from the specified vCard item. Users can change the information listed in the AutoComplete box for text fields with the VCARD_NAME attribute.

Internet Explorer 5: Personal Information

Information for the AutoComplete box is provided by the following:

  • The data store, primarily. The data store draws from previously completed INPUT type=text fields. The contents of the AutoComplete box are retrieved from the values corresponding to the field name.
  • The vCard schema. This schema is created from the values specified in the Profile Assistant.
  • The Common Name list. This list is generated from commonly used INPUT type=text field names from popular Web sites, and is linked to the respective vCard schema.

When a user enters information in an INPUT type=text element and submits a form, that information is encrypted and saved in the data store. If the values of the NAME or VCARD_NAME attributes match the data in the data store, that information is provided in the AutoComplete box. A user can quickly travel through an extensive form, because the requested information already is available and only needs to be selected.

Implementing AutoComplete

AutoComplete is enabled by default in Internet Explorer. Web authors and users do not need to make any special accommodations to use this feature. When a user enters information in an INPUT type=text field and submits the form, the data is saved in the encrypted data store. The next time a user begins typing in an INPUT type=text field with the same name or VCARD_NAME attribute value, the AutoComplete box displays a list of suggestions.

Note   The AutoComplete feature is not available in HTML Applications.

The VCARD_NAME attribute draws information from the Profile Assistant as well as from previously entered information. The vCard schema draws information from the Profile Assistant based on the following schema names, each of which is represented by a field in the Profile Assistant.



The following example demonstrates how the VCARD_NAME attribute and the vCard.Email possible value are used to access and save the AutoComplete information. Rather than looking in the data store for the oEmail field name, the AutoComplete box is populated with values specified for the vCard.Email item.

<INPUT TYPE = text
NAME = oEmail
VCARD_NAME = "vCard.Email"

Implementing AutoComplete is easy, but there may be times when either the user or the Web author does not want to use this feature. The AUTOCOMPLETE attribute allows Web authors to selectively disable the AutoComplete feature for a single INPUT type=text element or all INPUT type=text elements in a particular form. For example, by providing a value of off, a particular field or the entire form can be disabled. If a Web author does not want users to see the AutoComplete feature for a password field, the AUTOCOMPLETE attribute can be used to disable the feature for that single field, as in the following example:

<INPUT TYPE = password
NAME = oPassword

In addition, if a Web author does not want users to see the AutoComplete feature for any field in a form, the AUTOCOMPLETE attribute can be used to disable the feature for the entire form.


You can enable AutoComplete by setting the value of the autocomplete property to an empty string.

To determine when a user updates the content of a field from the AutoComplete dialog box, use the onpropertychange event, rather than the onchange event, because the onchange event does not fire.

The AutoComplete Settings dialog box in Internet Explorer also allows users to enable or disable the AutoComplete box, as well as clear previously saved entries. For example, users can use the AutoComplete Settings dialog box in Internet Explorer to enable or disable the AutoComplete feature for forms and addresses, specify whether to include passwords when information is saved, and clear the existing data store.

Internet Explorer 5: AutoComplete Dialog

AutoComplete Security

The AutoComplete box provides several levels of security:

  • Rogue Web sites cannot access the features of an open AutoComplete box.
  • Outsiders cannot collect the saved data store.
  • The data store is encrypted on the user's computer.

The first time a Web site is made aware of the new information is when the user selects one of the suggested entries and the data is entered into the field.

AutoComplete can be turned off using one of the following options:

  1. Administrators can turn off AutoComplete and restrict its use through the Internet Explorer Administrators Kit (IEAK). When an administrator turns off AutoComplete, there is no way for a Web site or user on the administrator's intranet to turn it back on.
  2. Web sites can turn off AutoComplete using the AUTOCOMPLETE attribute. When a Web author disables AutoComplete, the AutoComplete box does not appear for the disabled form or field and the values are not stored.
  3. Users can turn off AutoComplete from the AutoComplete dialog box in Internet Explorer. The AutoComplete dialog box is available by selecting Internet Options from the Tools menu, and then selecting the Content tab. When a user turns off AutoComplete, there is no way a site can turn it back on.

The security measures provided for AutoComplete help protect passwords. The AutoComplete feature does not operate in the same fashion with password fields as with regular text fields. When a password is first entered, the user is prompted with the following options:

  • Yes. The password is saved with the user name for that URL.
  • No. The password is not saved with the user name (default).
  • A check box allowing users to select whether they will be prompted to save passwords. If selected, the dialog box is not displayed again unless re-enabled from the AutoComplete Settings dialog.

When the AutoComplete feature is set to save passwords, a password is automatically filled in when a known user name is provided, and the password and user name are stored by URL. When changing passwords, the user is prompted to save the new password.

AutoComplete provides a convenient and safe way for users to quickly complete forms, and for Web sites to enhance user experience on a page. User information saved in the AutoComplete data store is safeguarded, because Web sites cannot automatically fill in forms using the data store, and a login page facade cannot fool the browser into surrendering the information due to domain-specific security.