Html input autocomplete off

How to Disable the Browser Autocomplete and Autofill on HTML Form and Input Fields

When a user starts typing in the HTML form field, browsers, by default, enable the autocomplete feature. Many users let their browsers collect form data allowing using autocomplete in forms in the future. However, there can be situations when this can not work accurately, or you might prefer that users manually insert all the information in details. Moreover, there might be a privacy concern for users, so browsers can let users disable it.

Some data presented in forms, however, are either not important in the future (such as a one-time pin) or include confidential information (such as a specific government identification or security code for bank cards). As the author of a website, you might prefer the browser not to remember the values for that kind of fields, even though the autocomplete feature of the browser is enabled. This allows the browser to offer autocompletion (i.e., display possible completions for the fields where the user has started typing) or autofill (i.e., pre-populate some fields on load).

How to Disable Autocomplete

To disable the autocomplete of text in forms, use the autocomplete attribute of and elements. You’ll need the «off» value of this attribute.

This can be done in a for a complete form or for specific elements:

1. Add autocomplete=»off» onto the element to disable autocomplete for the entire form.
2. Add autocomplete=»off» for a specific element of the form.

The autocomplete attribute works with the following types: text, search, url, tel, email, password, datepickers, range, and color.

Let’s see an example where the autocomplete is set to «off» for the whole form and two elements.

Example of using the autocomplete attribute with the «off» value:

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:

1. Add autocomplete=»off» to the element.
2. Add a hidden with autocomplete=»false» as a first child element of the form.

Example of disabling the autocomplete:

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="false" 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:

1. Tells the browser not to save user-input data on similar forms for later autocompletion, although browser-specific algorithms vary.
2. Prevents the browser from caching form data in the session history. When the data of forms is stored in the session history, the information filled in by the user will be still 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 the autocomplete=»off » for login fields. For login fields, there is no difference whether autocomplete is disabled for fields or fields.

When a website sets autocomplete=»off » for a or element, and username/password fields are included in it, the browser will still allow remembering these fields, and if the user accepts, the browser will autofill the fields the next time when the user visits that website.

In that way behave Firefox (since version 38), and Google Chrome (since version 34).

In the case, you represent a user management page where a user can specify a new password for a different user, and you don’t want to autofill password fields, use autocomplete=»new-password» , which is a sign for browsers that they are not required to react to it.

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:

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>

There are some probably better ways of disabling the autocomplete and autofill with Javascript and jQuery. Let’s also see some examples with them before you can decide which is best for your code.

Example of disabling the autocomplete with Javascript:

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:

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:

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>

Example of disabling the autofill with jQuery:

html> html> head> title>Title of the document title> script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"> script> script src="https://terrylinooo.github.io/jquery.disableAutoFill/assets/js/jquery.disableAutoFill.min.js"> script> head> body> form action="/form/submit" method="post" id="login-form"> input name="username" type="text" placeholder="username" /> input name="password" type="password" placeholder="password" /> input type="submit" value="Submit"> form> script> $(function( ) < $('#login-form').disableAutoFill(); >); script> body> html>

Источник

How to turn off form autocompletion

This article explains how a website can disable autocomplete for form fields.

These features are usually enabled by default, but they can be a privacy concern for users, so browsers can let users disable them. However, some data submitted in forms either are not useful in the future (for example, a one-time pin) or contain sensitive information (for example, a unique government identifier or credit card security code). As website author, you might prefer that the browser not remember the values for such fields, even if the browser’s autocomplete feature is enabled.

Note that the WCAG 2.1 Success Criterion 1.3.5: Identify Input Purpose does not require that autocomplete/autofill actually work — merely that form fields that relate to specific personal user information are programmatically identified. This means that the criterion can be passed (by adding the relevant autocomplete attributes to individual form fields) even when autocompletion for the form itself has been turned off.

Disabling autocompletion

To disable autocompletion in forms, you can set the autocomplete attribute to «off»:

You can do this either for an entire form, or for specific input elements in a form:

form method="post" action="/form" autocomplete="off"> … form> 

form method="post" action="/form"> … div> label for="cc">Credit card:label> input type="text" id="cc" name="cc" autocomplete="off" /> div> form> 

Setting autocomplete=»off» on fields has two effects:

• It tells the browser not to save data inputted by the user for later autocompletion on similar forms, though heuristics for complying vary by browser.
• It stops the browser from caching form data in the session history. When form data is cached in session history, the information filled in by the user is shown in the case where the user has submitted the form and clicked the Back button to go back to the original form page.

If a browser keeps on making suggestions even after setting autocomplete to off, then you have to change the name attribute of the input element.

The autocomplete attribute and login fields

Modern browsers implement integrated password management: when the user enters a username and password for a site, the browser offers to remember it for the user. When the user visits the site again, the browser autofills the login fields with the stored values.

Additionally, the browser enables the user to choose a master password that the browser will use to encrypt stored login details.

Even without a master password, in-browser password management is generally seen as a net gain for security. Since users do not have to remember passwords that the browser stores for them, they are able to choose stronger passwords than they would otherwise.

For this reason, many modern browsers do not support autocomplete=»off» for login fields:

Preventing autofilling with autocomplete=»new-password»

If you are defining a user management page where a user can specify a new password for another person, and therefore you want to prevent autofilling of password fields, you can use autocomplete=»new-password» .

This is a hint, which browsers are not required to comply with. However modern browsers have stopped autofilling elements with autocomplete=»new-password» for this very reason. For example, Firefox version 67 (see Firefox bug 1119063) stopped autofilling in this case; however, Firefox 70 (see Firefox bug 1565407) can suggest securely-generated passwords, but does not autofill a saved password. See the autocomplete compat table for more details.

Found a content problem with this page?

This page was last modified on Jul 4, 2023 by MDN contributors.

Источник

How TO — Turn Off Autocomplete For Input

Use the autocomplete attribute to turn off autocomplete for input fields:

Example

You can also turn off autocomplete for the whole form:

Example

Tip: Go to our HTML Form Tutorial to learn more about HTML Forms.

Tip: Go to our HTML autocomplete attribute reference to learn more about the automcomplete attribute.

Tip: Go to How TO — Autocomplete to learn how to create your own autocomplete component.

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник