To disable the suggestion of saved passwords in the browser via HTML

Question

I have here the following situation:

I created an HTML form to change the user’s password in case he forgets it.

The problem is that when trying to enter the password the browser exposes the options of already saved passwords, however as this is not a login screen it is not interesting that this is displayed to the user.

The HTML code I’m using is as follows::

<form id="form" action="@Url.Action("ResetPassword", "Login")" method="post">
        <div id="enter-options-box">
            <p class="title-bold">@ViewBag.UserId - @ViewBag.Identifier</p>
        </div>

        <label class="form-input">
            <i class="material-icons"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span></i>
            <input class="password-mask"
                   type="password"
                   autocomplete="off"
                   id="NewPassword"
                   maxlength="16"
                   name="NewPassword"
                   required
                   onchange="VerifyInput('NewPassword', 'newPassword-text'); this.setCustomValidity('');"
                   oninvalid="this.setCustomValidity('Por favor, preencha este campo.')"
                   onkeyup="CalculeStrength('NewPassword', 'strengt-bar', 'strengt-label')"
                   title=" " />
            <span id="newPassword-text" class="label">Nova senha</span>
            <span class="underline"></span>
        </label>

        <div class="box-bar">
            <div class="progress slin-bar">
                <div id="strengt-bar" class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
            <span id="strengt-label">Força da senha.</span>
        </div>

        <label class="form-input">
            <i class="material-icons"><span class="glyphicon glyphicon-ok" aria-hidden="true"></span></i>
            <input class="password-mask"
                   type="password"
                   autocomplete="off"
                   id="ConfirmPassword"
                   maxlength="16"
                   name="ConfirmPassword"
                   required
                   onchange="VerifyInput('ConfirmPassword', 'confirmPassword-text'); this.setCustomValidity('');"
                   oninvalid="this.setCustomValidity('Por favor, preencha este campo.')"
                   title=" " />
            <span id="confirmPassword-text" class="label">Confirmar senha</span>
            <span class="underline"></span>
        </label>

        <div class="submit-container clearfix">
            <input id="submit" name="submit" role="button" type="submit" class="btn btn-irenic float-right" tabindex="0" value="SALVAR" onclick="ClickWait('form');" />
        </div>
    </form>

How can I make sure that this list of saved passwords is not displayed?

Why does the browser interpret this as a login screen?

Answer 1

This is a native browser feature and there is no code disable.

See what it says to MDN documentation:

The autocomplete attribute and login fields

Modern browsers implement integrated password management: when the user fills in a user and password for a website, the browser offers to remember the data to the user. When the user visit the site again, the browser fills in the login fields automatically according to the values saved by it..

Browsers also allow the user to select a master password for the saved data to be encrypted.

Even without a master password, password management within the browser is usually seen as a security gain. As the users do not need to remember the passwords that the browser saves to they, they can choose stronger passwords than usually would choose.

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

• if a website uses autocomplete="off" for a form, and the form includes user and password fields, so the browser still so offers to save the login data, and if the user accept, the browser will fill this data automatically in next time the user visits the page.

• if a website uses autocomplete="off" field input de usuário e senha, so the browser still offers to save the login data, and if the user accepts, the browser will fill in this data automatically the next time the user visits the page.

This behavior exists in Firefox (since version 38), Google Chrome (since version 34), and Internet Explorer (since version 11).

In conclusion, one of the ways is to delete passwords memorized in Firefox (for example) is by right-clicking on the page and choosing from the "View page information) menu":

In the "Security" tab, click on "View saved passwords":

Then click on "Remove All":