Automatically Comprehensible Password FormsYou can help ensure that browsers' and extensions' password management functionality can understand your site's sign-up, sign-in and change-password forms by enriching your HTML with a dash of metadata. In particular:
Sign-in Form:<form id="login" action="login.php" method="post"> <input type="text" autocomplete="username"> <input type="password" autocomplete="current-password"> <input type="submit" value="Sign In!"> </form> Email First Sign-in Flow:Collect the email:<form id="login" action="login.php" method="post"> <input type="text" autocomplete="username"> <input type="submit" value="Sign In!"> </form>Then collect the password, but include the email as the value of a hidden form field: <style> #emailfield { display: none; } </style> <form id="login" action="login.php" method="post"> <input id="emailfield" type="text" value="me@example.test" autocomplete="username"> <input type="password" autocomplete="current-password"> <input type="submit" value="Sign In!"> </form> Sign-up Form:<form id="login" action="signup.php" method="post"> <input type="text" autocomplete="username"> <input type="password" autocomplete="new-password"> <input type="submit" value="Sign Up!"> </form>Or: <form id="login" action="signup.php" method="post"> <input type="text" autocomplete="username"> <input type="password" autocomplete="new-password"> <input type="password" autocomplete="new-password"> <input type="submit" value="Sign Up!"> </form> Related adviceFurther tips beyond just autocomplete attributes are listed in the Create Amazing Password Forms page. There are also useful autocomplete attribute values for annotating address forms. |
For Developers > Design Documents >