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 the Browser Autocomplete and Autofill on HTML Form and Input Fields?
The HTML autocomplete attribute specifies whether autocomplete should be enabled or disabled for an input field. It enables the browser to make a prediction about the value. When a user starts typing in a field, the browser should display fill-in options based on previously typed values. It is available on <input> elements such as <textarea> elements, <select> elements, and <form> elements as they accept a text or numeric value as input.
It takes two attribute values, on and off.
On: It specifies that the autocomplete is enabled.
Off: It indicates that autocomplete is turned off.
Browsers enable the autocomplete feature by default when a user begins typing in an HTML form field. Many users allow their browsers to collect form data, which allows them to use autocomplete in forms in the future. However, there may be times when this will not work correctly, or it might be mandatory for the user to manually enter all of the information in the details. Furthermore, there may be a privacy concern for users, so browsers can allow them to disable it.
Setting autocomplete="off" for our form and fields has two effects. It instructs the browser not to save user-input data on similar forms for later auto completion, though browser-specific algorithms differ. It allows the browser to avoid caching form data in the session history. When form data is saved in the session history, the information entered by the user is still displayed, even if the form has been submitted and the user has clicked the Back button to return to the initial form page.
To disable autocomplete in forms and input tags, we can use the autocomplete attribute of the <input> and <form> elements.
Using autocomplete=”off”
In the following example we will set autocomplete to ‘off’ for the entire form and all the input elements in order to disable it.
Example
<!DOCTYPE html>
<html>
<head>
<title>
How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
</title>
<style>
.box{
background-color:thistle;
padding:10px;
width:380px;
}
div{
margin:20px;
}
h3{
margin-left:20px;
}
</style>
</head>
<body>
<h3>Student Details</h3>
<div class="box">
<form action="/form/submit" method="get" autocomplete="off">
<div>
<label for="name">Name:
<input type="text" name="name" id="name" autocomplete="off">
</label>
</div>
<div>
<label for="rno">Roll Number:
<input type="number" name="rno" id="rno" autocomplete="off">
</label>
</div>
<div>
<label for="backlogs">Active Backlogs:
<input type="number" name="backlogs" id="backlogs" autocomplete="off">
</label>
</div>
<div>
<label for="cgpa">CGPA:
<input type="number" name="cgpa" id="cgpa" autocomplete="off">
</label>
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Using autocomplete=”false”
This example shows how autocomplete can be disabled by adding a hidden input with autocomplete=”false” as the first child element of the form.
Example
<!DOCTYPE html>
<html>
<head>
<title>
How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
</title>
<style>
.box{
background-color:thistle;
padding:10px;
width:380px;
}
div{
margin:20px;
}
h3{
margin-left:20px;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<h3>Student Details</h3>
<div class="box">
<form action="/form/submit" method="post" autocomplete="off">
<input autocomplete="false" name="hidden" type="text" class="hidden">
<div>
<label for="name">Name:
<input type="text" name="name" id="name">
</label>
</div>
<div>
<label for="rno">Roll Number:
<input type="number" name="rno" id="rno">
</label>
</div>
<div>
<label for="backlogs">Active Backlogs:
<input type="number" name="backlogs" id="backlogs">
</label>
</div>
<div>
<label for="cgpa">CGPA:
<input type="number" name="cgpa" id="cgpa">
</label>
</div>
<div class="btn">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Modern browsers do not support the autocomplete="off" for login fields because many users do not want the browser to remember their passwords. It makes no difference whether autocomplete is disabled for input or form fields for login fields.
When a website specifies autocomplete="off " for a form> or input> element and includes username/password fields, the browser will still remember these fields, and if the user accepts, the browser will autofill the fields the next time the user visits that website. For this reason, users can use autocomplete=”new-password” to hint the browsers to not react to it.
Using JavaScript and JQuery
There are probably some better ways to disable autocomplete and autofill with JavaScript and jQuery. Let us look at an example of this.
Example
<!DOCTYPE html>
<head>
<title>
How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields?
</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<form action="/form/submit" method="post">
<div class="container">
<input type="text" id="name" name="username" placeholder="Name">
<br><br>
<input type="number" id="phoneno" name="phoneno" placeholder="Phone Number">
<br><br>
<button type="submit">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$('input').attr('autocomplete', 'off');
});
</script>
</body>
</html>
574 Views
