title: Disabling Safari autofill on usernames and passwords
body: <p>You might already know, that Safari has a nasty autofill bug where it fills email, username and password fields no matter if you set <code>autocomplete="off"</code> or not.</p>
  
  <p>Here's a basic form:</p>
  
  <pre><code>&lt;form action="/" method="post"&gt;
      &lt;p&gt;
          &lt;label&gt;E-mail&lt;/label&gt;
          &lt;input type="text" name="email" value="" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label&gt;Password&lt;/label&gt;
          &lt;input type="password" name="password" value="" /&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>...Safari autofills those fields on page load like it should, job well done!</p>
  
  <p>If you put <code>autocomplete="off"</code> to the fields and/or the form element, Safari still autofills those fields:</p>
  
  <pre><code>&lt;form action="/" method="post" autocomplete="off"&gt;
      &lt;p&gt;
          &lt;label&gt;E-mail&lt;/label&gt;
          &lt;input type="text" name="email" value="" autocomplete="off" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label&gt;Password&lt;/label&gt;
          &lt;input type="password" name="password" value="" autocomplete="off" /&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Even this doesn't work:</p>
  
  <pre><code>&lt;form action="/" method="post" autocomplete="off"&gt;
      &lt;p&gt;
          &lt;label&gt;E-mail&lt;/label&gt;
          &lt;input type="text" name="secretfield1" value="" autocomplete="off"/&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label&gt;Password&lt;/label&gt;
          &lt;input type="password" name="secretfield2" value="" autocomplete="off" /&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>...since Safari looks up those <code>&lt;label&gt;</code> elements if they contain words "E-mail", "Password" etc. and goes ahead with the autofill.</p>
  
  <p>Aaaahhhhha!, I thought, and tried this:</p>
  
  <pre><code>&lt;form action="/" method="post" autocomplete="off"&gt;
      &lt;p&gt;
          &lt;label&gt;%REPLACE_EMAIL_TITLE%&lt;/label&gt;
          &lt;input type="text" name="%REPLACE_EMAIL_NAME%" value="" autocomplete="off"/&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label&gt;%REPLACE_PASSWORD_TITLE%&lt;/label&gt;
          &lt;input type="password" name="%REPLACE_PASSWORD_NAME%" value="" autocomplete="off" /&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>...and replace %TAGS% with the real names using JavaScript. Safari autofill kicks in. No matter if you set a 10 second timeout on the replacement.</p>
  
  <p>So, is this really the only option?</p>
  
  <pre><code>&lt;form action="/" method="post" autocomplete="off"&gt;
      &lt;p&gt;
          &lt;label&gt;That electronic postal address we all use, but can't write the title here because Safari fills this with YOUR information if you have autofill turned on&lt;/label&gt;
          &lt;input type="text" name="someelectronicpostaladdress" value="" autocomplete="off"/&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;label&gt;A set of characters, letters, numbers and special characters that is so secret that only you or the user you are changing it for knows, but can't write the title here because Safari sucks&lt;/label&gt;
          &lt;input type="password" name="setofseeecretcharacters" value="" autocomplete="off" /&gt;
      &lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I hope not?</p>
  
  <p>UPDATE: <a href="https://twitter.com/skithund/status/448800808310931456" rel="noreferrer">@skithund pointed out in Twitter</a>, that <a href="http://www.mactrast.com/2014/03/apple-seeds-pre-release-safari-7-0-3-safari-6-1-3-seed-2-developers/" rel="noreferrer">Safari is getting a 4.0.3 update</a>, which mentions "Login AutoFill". Does anyone know if that update is going to fix this?</p>