Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to specify whether the or the element should have autocomplete enabled in HTML?
The autocomplete attribute in HTML controls whether the browser should automatically suggest previously entered values for form fields. This feature helps users fill forms more efficiently by displaying a dropdown of suggested values based on their input history.
Syntax
Following is the syntax for the autocomplete attribute on the <form> element −
<form autocomplete="on|off"> <!-- form fields --> </form>
Following is the syntax for the autocomplete attribute on the <input> element −
<input type="text" autocomplete="on|off|name|email|username">
Autocomplete Values
The autocomplete attribute accepts the following values −
| Value | Description |
|---|---|
on |
Default value. Browser automatically suggests values based on what users entered before. |
off |
Browser will not suggest values. Users must type the complete value manually. |
name |
Browser suggests full name values for name fields. |
email |
Browser suggests email address values for email fields. |
username |
Browser suggests username values for username fields. |
Autocomplete on Form Element
When applied to the <form> element, the autocomplete attribute affects all form fields within that form unless individual fields override this setting.
Example − Form with Autocomplete Enabled
Following example shows a form with autocomplete enabled −
<!DOCTYPE html>
<html>
<head>
<title>Form Autocomplete Enabled</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form (Autocomplete On)</h2>
<form action="/submit" method="post" autocomplete="on">
<label for="fname">Full Name:</label><br>
<input type="text" id="fname" name="fname" style="padding: 5px; margin: 5px 0;"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" style="padding: 5px; margin: 5px 0;"><br><br>
<input type="submit" value="Submit" style="padding: 8px 16px;">
</form>
<p><em>Note: Type values and submit. When you reload and start typing again, the browser will suggest previously entered values.</em></p>
</body>
</html>
In this form, all input fields will show autocomplete suggestions based on previous entries.
Example − Form with Autocomplete Disabled
Following example shows a form with autocomplete disabled for security purposes −
<!DOCTYPE html>
<html>
<head>
<title>Form Autocomplete Disabled</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Secure Login Form (Autocomplete Off)</h2>
<form action="/login" method="post" autocomplete="off">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" style="padding: 5px; margin: 5px 0;"><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" style="padding: 5px; margin: 5px 0;"><br><br>
<input type="submit" value="Login" style="padding: 8px 16px;">
</form>
<p><em>Note: This form will not show autocomplete suggestions for any fields.</em></p>
</body>
</html>
This form disables autocomplete for security reasons, particularly useful for login forms and sensitive data.
Autocomplete on Individual Input Elements
Individual <input> elements can have their own autocomplete settings that override the form's setting. This provides fine-grained control over which fields should have autocomplete enabled.
Example − Mixed Autocomplete Settings
Following example shows a form where different fields have different autocomplete settings −
<!DOCTYPE html>
<html>
<head>
<title>Mixed Autocomplete Settings</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Profile Form (Mixed Autocomplete)</h2>
<form action="/profile" method="post" autocomplete="on">
<label for="fullname">Full Name:</label><br>
<input type="text" id="fullname" name="fullname" autocomplete="name" style="padding: 5px; margin: 5px 0;"><br>
<label for="useremail">Email:</label><br>
<input type="email" id="useremail" name="useremail" autocomplete="email" style="padding: 5px; margin: 5px 0;"><br>
<label for="creditcard">Credit Card:</label><br>
<input type="text" id="creditcard" name="creditcard" autocomplete="off" style="padding: 5px; margin: 5px 0;"><br>
<label for="phone">Phone Number:</label><br>
<input type="tel" id="phone" name="phone" autocomplete="tel" style="padding: 5px; margin: 5px 0;"><br><br>
<input type="submit" value="Save Profile" style="padding: 8px 16px;">
</form>
<p><em>Note: Name, email, and phone fields will show specific autocomplete suggestions, while the credit card field will not show any suggestions.</em></p>
</body>
</html>
In this example, the form has autocomplete enabled overall, but individual fields use specific autocomplete values. The credit card field explicitly disables autocomplete for security.
Common Use Cases
Following are the common scenarios for using autocomplete −
Enable autocomplete for general forms like contact forms, registration forms, and address forms to improve user experience.
Disable autocomplete for sensitive data fields like passwords, credit card numbers, social security numbers, and banking information.
Use specific values like
autocomplete="email"orautocomplete="name"to help browsers provide more relevant suggestions.Mixed settings where the form has autocomplete enabled but specific sensitive fields disable it individually.
Browser Compatibility
The autocomplete attribute is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. However, the specific autocomplete values like "name", "email", etc., are part of HTML5 and have broader support in newer browser versions.
Conclusion
The autocomplete attribute provides control over browser suggestion behavior in HTML forms. Use autocomplete="on" for general forms to enhance user experience, and autocomplete="off" for sensitive data fields to improve security. Individual input elements can override the form's autocomplete setting for fine-grained control.
203 Views
