FIREFOX - HTML - password INPUT - When page loads the field contains data?

Question

I am having a problem with a password input on my website when viewing it using firefox, here is the html :

<div class="passField">
    <label for="password">Password : </label>
    <input type="password"
        name="password" id="password" 
        title="6 to 20 characters, one uppercase and numbers allowed." placeholder="APassword123"
        maxlength="20" pattern="^[A-Za-z0-9]{6,20}$"
    />
    <span class="inputDesc">'.$passwordDesc.'</span>
</div>

The user is directed to the page containing this input by a link in an email like this :

http://www.mysite.com/reset.php?theId=1&theKey=699acfc121edfd91df48d5d99044d74d

A database check is preformed and if the details match the ones relating to that user id in my database then the user is presented with two inputs. One for the initial password, one for the confirmation of the password that was typed.

The problem I am having is that when the page loads, the initial password input contains a few dots (data) whereas the second input contains the placeholder... both are type password.

Here is a screen shot to see what i am talking about :

Here is the same page in IE :

As I understand it, they should both come out uniform, showing the placeholder as usual regardless of the input type and as I have not assigned any value to this input, why on earth is a value being presented in this manner when no value is assigned even according to the page source?

Any assistance, understanding or information relating to this would be greatly appreciated, thank you!

Answer 1

Use autocomplete="off" on the fields to avoid pre-filling of the fields. Of course this does not account for possible JavaScript or anything else populating the field.

Edit - Further explanation (because it was asked for)

Most browsers have a built in function to automatically fill form fields. They fill in fields that have standard names a user has filled in often(this is often asked first) For example address fields are often filled like this.

2nd part of the feature is filling saved passwords, but browsers are not really smart. When you save a password on, for example, http://example.com/phpmyadmin they will also fill in a password field on the homepage of http://example.com/ Which is often incorrect because the login on the homepage is pretty sure not the login for the admin area.

You can solve this issue by either setting autocomplete=off which turns this feature off for the input field(could be that this also works on entire forms if you want) or giving the fields different names. Whereas using autocomplete=off is far more reliable.