Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to disable browser Autocomplete on the web form field/input tag?
In this article, we will learn how to disable the browser autocomplete feature on the web form fields or their input elements, and we will use the “autocomplete” attributes provided by “form” and “input” HTML tags.
Browser autocomplete is a feature that suggests the past values entered and submitted into the forms. By default, autocomplete is enabled in the browsers, and so when the user clicks on an input, the suggestions are visible for that input value, and the user can directly pick any of the suggestions to autofill the content.
To disable this behavior, we will see 2 approaches that utilize the “autocomplete” attribute available in the “form” and “input” HTML elements.
Approach 1
In this approach, we will use the “autocomplete” attribute directly on the “form” HTML tag to disable the autocomplete behavior of browsers on all “input” elements present inside the “form” tag.
Example
Let’s check the above approach with the help of an example −
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<h4>Form with autocomplete ON</h4>
<form>
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />
<br />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<br />
<input type="submit" value="Submit" />
</form>
<h4>Form with autocomplete OFF</h4>
<form autocomplete="off">
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />
<br />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Approach 2
In this approach, we will use the “autocomplete” attribute directly on the “input” HTML tag to disable the autocomplete behavior of browsers on that particular “input” element only.
Example
Let’s check the above approach with the help of an example −
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<form>
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Example 3
In this example, we use 2 methods to disable autocomplete behaviour, by setting “autocomplete” to false using javascript, and by disabling the form autofill by setting its autocomplete attribute to off.
Filename: index.html
<html lang="en">
<head>
<title>How to disable browser Autocomplete on web form field/input tag?</title>
<script>
// Method 1: Setting autocomplete to false using JavaScript
function disableAutocomplete() {
document.getElementById("email").autocomplete = "off";
}
// Method 2: Disabling form autofill
function disableAutofill() {
var form = document.getElementById("myForm");
form.setAttribute("autocomplete", "off");
form.addEventListener("submit", function() {
this.removeAttribute("autocomplete");
});
}
</script>
</head>
<body>
<h3>How to disable browser Autocomplete on web form field/input tag?</h3>
<form id="myForm">
<label for="email">Email (With Autocomplete)</label>
<input type="email" name="email" id="email" />
<br />
<label for="firstName">First Name (Without Autocomplete)</label>
<input type="text" name="firstName" id="firstName" autocomplete="off" />
<br />
<label for="lastName">Last Name (Without Autocomplete)</label>
<input type="text" name="lastName" id="lastName" autocomplete="off" />
<br />
<input type="submit" value="Submit" />
</form>
<button onclick="disableAutocomplete()">Disable Autocomplete for Email Field</button>
<button onclick="disableAutofill()">Disable Form Autofill</button>
</body>
</html>
Conclusion
In this article, we learned how to disable the default browser autocomplete behavior on web form fields or input tags, with the help of 2 different approaches, and 3 examples. In the first approach, we applied the “autocomplete” property on the “form” tag to disable the autocomplete behavior on the entire form, and in the second approach, we applied the “autocomplete” property on the “input” tag to only disable the behavior on that particular input element.
124 Views
