How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields
Learn how to prevent browsers auto filling the input fields of HTML forms. Use autocomplete="off" to specify that autocomplete is disabled. See examples.
When a user starts typing in an HTML form field, browsers enable the autocomplete feature by default. Many users allow their browsers to collect form data for future autocomplete use. However, there can be situations where this does not work accurately, or you might prefer that users manually enter all information. Moreover, privacy concerns may lead users to disable it themselves.
Some data presented in forms, however, is either not important in the future (such as a one-time PIN) or includes confidential information (such as a government ID or bank card security code). As a website author, you might prefer the browser not to remember the values for those fields, even if the browser's autocomplete feature is enabled. This allows the browser to offer autocompletion (i.e., display possible completions for fields where the user has started typing) or autofill (i.e., pre-populate some fields on load).
How to Disable Autocomplete
To disable autocomplete for text in forms, use the autocomplete attribute on <input> and <form> elements. You'll need the "off" value of this attribute.
This can be done on a <form> for the entire form or on specific <input> elements:
- Add
autocomplete="off"to the<form>element to disable autocomplete for the entire form. - Add
autocomplete="off"to a specific<input>element of the form.
The autocomplete attribute works with the following <input> types: text, search, url, tel, email, password, date, time, datetime-local, month, week, number, range, and color.
Let’s see an example where autocomplete is set to "off" for the whole form and two <input> elements.
Example of using the autocomplete attribute with the "off" value:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
margin: 5px 0;
padding: 5px;
}
</style>
</head>
<body>
<form action="/form/submit" method="get" autocomplete="off">
<div>
<input type="text" name="Name" placeholder="First Name" autocomplete="off" />
</div>
<div>
<input type="text" id="lname" name="Surname" placeholder="Last Name" autocomplete="off" />
</div>
<div>
<input type="number" name="Credit card number" placeholder="Credit card number" />
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>Let's see another example. Here, you'll need the following steps:
- Add
autocomplete="off"to the<form>element. - Add a hidden
<input>withautocomplete="off"as the first child element of the form.
Example of disabling the autocomplete:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:not[type="submit"] {
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 5px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<form autocomplete="off" method="post" action="/form/submit">
<input autocomplete="off" name="hidden" type="text" class="hidden" />
<div>
<label for="name">Name
<input type="text" name="name" id="name" placeholder="Enter Your Name" />
</label>
</div>
<br />
<div>
<label for="email">Email
<input type="email" name="email" id="email" placeholder="Enter Your Email" />
</label>
</div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>There are two effects of setting autocomplete="off" for your form fields:
- Tells the browser not to save user-input data on similar forms for later autocompletion, although browser-specific algorithms vary.
- Prevents the browser from caching form data in the session history. When form data is stored in the session history, the information filled in by the user will still be displayed, even if the user has submitted the form and clicked the Back button to return to the initial form page.
As many users wouldn’t like the browser to remember passwords, modern browsers do not support autocomplete="off" for login fields. For login fields, there is no difference whether autocomplete is disabled for <input> fields or <form> fields.
When a website sets autocomplete="off" for a <form> or <input> element, and username/password fields are included in it, the browser will still allow remembering these fields. If the user accepts, the browser will autofill the fields the next time the user visits that website.
Firefox (since version 38) and Google Chrome (since version 34) behave this way.
If you are managing a user account page where a user can set a new password for another user, and you want to prevent autofill on the password field, use autocomplete="new-password". This signals to browsers that they should not attempt to autofill the field.
If Google Chrome remembers a login or password, it will change the background to yellow. To remove the background color, you can try the following.
Example of removing the yellow background from the field:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
</style>
</head>
<body>
<form action="/form/submit" method="GET">
<div>
<label for="name">Name
<input type="text" name="name" id="name" placeholder="Enter Your Name" />
</label>
</div>
<br />
<div>
<label for="email">Email
<input type="email" name="email" id="email" placeholder="Enter Your Email" />
</label>
</div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>The CSS box-shadow workaround may affect text contrast. Ensure the background color matches your site's design and maintains sufficient contrast for readability.
There are other effective ways of disabling autocomplete and autofill with JavaScript and jQuery. Let's also see some examples with them before you decide which is best for your code.
Example of disabling the autocomplete with Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the Document</title>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<input type="text" name="username" placeholder="Enter Name" />
<input type="email" name="email" placeholder="Enter Email" />
<button type="submit"> Submit </button>
</div>
</form>
<script>
let tagArr = document.getElementsByTagName("input");
for (let i = 0; i < tagArr.length; i++) {
tagArr[i].autocomplete = 'off';
}
</script>
</body>
</html>Example of disabling the autocomplete using Javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<input type="text" id="name" name="username" placeholder="Enter Name" />
<input type="email" id="email" name="email" placeholder="Enter Email" />
<button type="submit">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
$('input').attr('autocomplete', 'off');
});
</script>
</body>
</html>Example of disabling the autocomplete with jQuery:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the Document</title>
<script src="https://code.jquery.com/jquery-3.5.0.min.js">
</script>
</head>
<body>
<form action="/form/submit" method="post">
<div class="form-group">
<input type="text" id="name" name="username" placeholder="Enter Name" />
<input type="email" id="email" name="email" placeholder="Enter Email" />
<button type="submit">Submit</button>
</div>
</form>
<script>
$(document).ready(function() {
try {
$("input[type='text']").each(function() {
$(this).attr("autocomplete", "off");
});
}
catch (e)
{}
});
</script>
</body>
</html>