autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete

I have an form with autocomplete disabled but it does not works and makes the autocomplete to be enabled in firefox and higher version of chrome

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
    <li>
        <input type="submit" class="button" value="Login" id="Login" name="Login">
    </li>
    </ul>
</form>

When the type is changed from password to text it works in all browser. Can anyone help to solve this issue?

You can just make the field readonly while form loading. While the field get focus you can change that field to be editable. This is simplest way to avoid auto complete.

<input name="password" id="password" type="password" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />

When I faced the same problem I resolved by creating a temporary text box above the password field and hide it

like this,

<form method="post" autocomplete="off" action="">
    <ul class="field-set">
    <li>
        <label>Username:</label>
        <input type="text" name="acct" id="username" maxlength="100" size="20">
    </li>
    <li>
        <label>Password:</label>
        <input type="text" style="display:none;">
        <input type="password" name="pswd" id="password" maxlength="16" size="20" >
    </li>
        ...
    </ul> </form>

It will make the username text field not to show any previously typed words in a drop down. Since there is no attribute like name, id for the input field <input type="text" style="display:none;"> it wouldn't send any extra parameters also.

I am Not sure this is a good practice, but it will resolve the issue.

This will prevent the auto-filling of password into the input field's (type="password").

<form autocomplete="off">
  <input type="password" autocomplete="new-password">
</form>

Browser's normally have two related yet different features regarding forms:

• Form auto-complete, where items of <input type="text"> type (and similar) collect typed values and offer them back in the form of a drop-down list.
  (It's a simple feature that works pretty well.)

• Password manager, where browser prompts to remember username/password combinations when it detects you've submitted a login form. When returning to the site, most browsers display available usernames in a drop-down box (Firefox, Chrome, Internet Explorer...) but some have a toolbar button (Opera). Also, Chrome highlights the fields in hard-coded yellow.
  (This depends on heuristics and might fail on certain pages.)

There's an edge case with forms tagged as autocomplete="off". What happens if it's a login form and the user has previously stored a username/password? Actually removing the password from the local database looks like inappropriate so probably no browser does so. (In fact, data from form auto-complete is not erased either.) Firefox decides to give power to the user: you have a password, so I'll let you use it. Chrome decides to give power to the site.

Just add the autocomplete="new-password" attribute to your password input field.

To learn more about autocomplete:

• WHATWG HTML Standard docs
• Mozilla Developer Network docs