How to block autocomplete in modern browsers?

how-to-block-autocomplete.md

Since Chrome 34, Firefox 30 and Internet Explorer 11 the autocomplete attribute for input[type="password"] is being ignored (:angry:). Many people have been complaining and asking for workarounds because in some cases it's an important requirement to block autocomplete.

Here is a workaround for a classic implementation of login (currently working in mainstream browsers):

##OLD WAY The old way was using autocomplete="off" attribute in passwords' input:

<form>

    <label>Username</label>
    <input id="username" name="username">

    <label>Password</label>
    <input id="password" name="password" type="password" autocomplete="off">

    <input id="rememberme" name="rememberme" type="checkbox" value="false">
    <label class="checkbox">Remember me</label>

    <button type="submit">Log in</button>
    
</form>

##NEW WAY The new way is adding fake username and password fields before the real ones and hiding them. Those fields are autocompleted by the browser (but users don't realize it 😎).

<form>

    <input type="text" style="display:none">
    <input type="password" style="display:none">
    
    <label>Username</label>
    <input id="username" name="username">

    <label>Password</label>
    <input id="password" name="password" type="password">

    <input id="rememberme" name="rememberme" type="checkbox" value="false">
    <label class="checkbox">Remember me</label>

    <button type="submit">Log in</button>
    
</form>

Thanks @felipefunes and @beckyq for editing.