Controlling form completion

More about WEB PAGE

Anatomy of the <head>

Grouping content

Creating advanced tables

Form Handling

Customizing the input element

Using input validation

Browsers aid the user by remembering the data they have entered into forms and offering to reuse that data automatically when a similar form is seen again. This technique reduces the need for the user to enter the same data over and over again. A good example is the name and shipping details a user enters when purchasing goods or services online. Every web site has its own shopping cart and registration process, but the browser uses the data that the user had entered in other forms to speed up the checkout process.

Browsers use different techniques to figure out what data to reuse, but a common approach is to look for the name attribute of input elements. In general, completing forms automatically is beneficial to the user and makes little difference to the web application. But there are times when you don’t want the browser to fill out the form. Let’s see how you can do this, using the autocomplete attribute on the form element.

<html>
  <head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <form autocomplete="off" method="post" action="http://titan:8080/form">
      <input name="fave"/>
      <input name="name"/>
      <button>Submit Vote</button>
    </form>
  </body>
</html>

There are two allowed values for the autocomplete attribute: on and off. The on value permits the browser to fill out the form and is the default value that is assumed when you don’t apply the attribute.

Applying the autocomplete attribute to input elements

<html>
  <head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </head>
  <body>
    <form autocomplete="off" method="post" action="http://titan:8080/form">
      <input autocomplete="on" name="fave"/>
      <input name="name"/>
      <button>Submit Vote</button>
    </form>
  </body>
</html>

The autocomplete attribute on the form element sets the default policy for the input elements in the form. However, as the listing shows, you can override that policy for individual elements. In this example, the attribute on the form element disabled autocomplete, but the same attribute applied to the first input element switches it back on—but just for that element. The second input element, to which the autocomplete attribute has not been applied, is subject to the form-wide policy.

In general, you should leave autocomplete enabled—users are accustomed to populating forms automatically and are typically faced with several forms during any kind of web transaction. For you to take this feature away intrudes into the preferences and work habits of your users. We know that it is jarring when we try to buy items from sites that disable autocompletion, especially when the form we are trying to fill in wants very basic information such as name and address. Some sites disable autocomplete for credit card data, which makes more sense—but even then, this approach should be used with caution and the reasons for using this feature should be fully thought through.