[html] How do you disable browser Autocomplete on web form field / input tag?

This is a security issue that browsers ignore now. Browsers identify and store content using input names, even if developers consider the information to be sensitive and should not be stored.

Making an input name different between 2 requests will solve the problem (but will still be saved in browser's cache and will also increase browser's cache).

Asking the user to activate or deactivate options in their browser's settings is not a good solution. The issue can be fixed in the backend.

Here's the fix. All autocomplete elements are generated with a hidden input like this:

<?php $r = md5(rand() . microtime(TRUE)); ?>
<form method="POST" action="./">
    <input type="text" name="<?php echo $r; ?>" />
    <input type="hidden" name="__autocomplete_fix_<?php echo $r; ?>" value="username" />
    <input type="submit" name="submit" value="submit" />
</form>

The server then processes the post variables like this: (Demo)

foreach ($_POST as $key => $val) {
    $newKey = preg_replace('~^__autocomplete_fix_~', '', $key, 1, $count);
    if ($count) {
        $_POST[$val] = $_POST[$newKey];
        unset($_POST[$key], $_POST[$newKey]);
    }
}

The value can be accessed as usual

echo $_POST['username'];

And the browser won't be able to suggest information from the previous request or from previous users.

This will continue to work even if browsers update their techniques to ignore/respect autocomplete attributes.

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to forms

How do I hide the PHP explode delimiter from submitted form results? React - clearing an input value after form submit How to prevent page from reloading after form submit - JQuery Input type number "only numeric value" validation Redirecting to a page after submitting form in HTML Clearing input in vuejs form Cleanest way to reset forms Reactjs - Form input validation No value accessor for form control TypeScript-'s Angular Framework Error - "There is no directive with exportAs set to ngForm"

Examples related to browser

How to force reloading a page when using browser back button? How do we download a blob url video How to prevent a browser from storing passwords How to Identify Microsoft Edge browser via CSS? Edit and replay XHR chrome/firefox etc? Communication between tabs or windows How do I render a Word document (.doc, .docx) in the browser using JavaScript? "Proxy server connection failed" in google chrome Chrome - ERR_CACHE_MISS How to check View Source in Mobile Browsers (Both Android && Feature Phone)

Examples related to autocomplete

twitter bootstrap 3.0 typeahead ajax example How do I stop Notepad++ from showing autocomplete for all words in the file how to get value of selected item in autocomplete .autocomplete is not a function Error Angularjs autocomplete from $http autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete Disabling Chrome Autofill How to add Google Maps Autocomplete search box? Google Maps API - how to get latitude and longitude from Autocomplete without showing the map? twitter bootstrap autocomplete dropdown / combobox with Knockoutjs