More about WEB PAGE
Anatomy of the <head>
- Understanding the need to group content
- Using the div Element
- Grouping content into lists
- Dealing with figures
Creating advanced tables
- Adding table headers cells
- Denoting the headings and the table body
- Creating irregular tables
- Applying borders to the table element
- The action attribute
- The method attribute
- Configuring the Data Encoding
- Controlling form completion
- Setting the name of the form
- Adding labels to a form
- Automatically focusing on an input element
- Disabling individual input elements
- Grouping form elements together
- Using the button element
Customizing the input element
- Using the input element for text input
- Setting values and using placeholders
- Using a data list
- Creating read-only and disabled text boxes
- Restrict data entry
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.