https://www.chromium.org/developers/design-documents/create-amazing-password-forms/

Scan ID:
5c3ae371-e169-4b5a-8d36-fba66568be3eFinished
Submitted URL:
https://goo.gl/9p2vKqRedirected
Report Finished:

The outgoing links identified from the page

LinkText
https://policies.google.com/technologies/cookies?hl=enLearn more
https://blog.chromium.org/Chromium Blog
https://developer.chrome.com/extensionsGoogle Chrome Extensions
https://developers.google.com/site-policies.html#restrictionsnoted
https://creativecommons.org/licenses/by/2.5/Creative Commons Attribution 2.5 license
https://chromium.googlesource.com/chromium/src/+/HEAD/LICENSEBSD License
https://policies.google.com/privacyPrivacy
https://edit.chromium.org/edit?repo=chromium/website/main&file=site/developers/design-documents/create-amazing-password-forms/index.md&ext_google.git=%7B%22repo%22%3A%22chromium%2Fwebsite%22%2C%22ref%22%3A%22main%22%2C%22file%22%3A%22site/developers/design-documents/create-amazing-password-forms/index.md%22%7DEdit this page
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls%3A-the-autocomplete-attributeAutocomplete
https://developer.mozilla.org/en-US/docs/Web/API/History_APIHistory.pushState or History.replaceState

JavaScript Variables · 14 found

Global JavaScript variables loaded on the window object of a page, are variables declared outside of functions and accessible from anywhere in the code within the current scope

NameType
onbeforetoggleobject
documentPictureInPictureobject
onscrollendobject
gtagfunction
dataLayerobject
docsearchfunction
googleobject
google_tag_managerobject
google_tag_dataobject
GoogleAnalyticsObjectstring

Console log messages · 0 found

Messages logged to the web console

HTML

The raw HTML body of the page

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <title>Create Amazing Password Forms</title>
  <link rel="stylesheet" href="/_stylesheets/@docsearch/style.css">
  <link rel="stylesheet" href="/_stylesheets/default.css">
<script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-24XP4PG02H"></script><script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-24XP4PG02H');
</script><script src="/_scripts/@docsearch/index.js"></script><script src="https://www.googletagmanager.com/gtag/js?id=UA-5484340-1" async=""></script><script src="https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js" data-autoload-cookie-consent-bar="true" data-autoload-cookie-content-bar-intl-code=""></script><style type="text/css">
   #cookieBar {
     background-color: #5a5a5a;
     border: none;
     border-radius: 0;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     bottom: 0;
     color: #fff;
     left: 0;
     margin: 0;
     position: fixed;
     right: 0;
     width: 100%;
     z-index: 999;
   }
 
   #cookieBar .cookieBarInner {
     padding: 10px 15px;
   }
 
   #cookieBar .cookieBarText, #cookieBar .cookieBarButtons {
     font-family: arial,sans-serif;
     font-size: 13px;
     font-weight: 600;
     line-height: 1.8;
   }
 
   #cookieBar .cookieBarText {
     margin-right: 5px;
   }
 
   [dir="rtl"] #cookieBar .cookieBarText {
     margin-left: 5px;
     margin-right: 0;
   }
 
   @media (max-width: 720px) #cookieBar .cookieBarText {
     display: block;
     margin-bottom: 5px;
   }
 
   #cookieBar .cookieBarButton {
     background-color: #303030;
     border: 1px solid rgba(0,0,0,.1);
     border-radius: 2px;
     -moz-border-radius: 2px;
     -webkit-border-radius: 2px;
     color: #fff;
     cursor: pointer;
     line-height: 19px;
     margin-left: 5px;
     padding: 4px 8px;
     text-decoration: none;
     white-space: nowrap;
   }
 
   [dir="rtl"] #cookieBar .cookieBarButton {
     margin-left: 0;
     margin-right: 5px;
   }
 </style></head>
<!-- Configure Google Analytics v4 -->
<!-- Google tag (gtag.js) -->



<body><div id="cookieBar" aria-labelledby="cookieBarText" role="region"><div class="cookieBarInner"><span id="cookieBarText" class="cookieBarText">This site uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic.</span><span class="cookieBarButtons"><a rel="noopener" target="_blank" href="https://policies.google.com/technologies/cookies?hl=en" class="cookieBarButton cookieBarMoreButton">Learn more</a><a href="#" role="button" class="cookieBarButton cookieBarConsentButton">OK, got it</a></span></div></div><header>
  <a href="/">
    <img alt="the Chromium logo" src="/_assets/icon-chromium-96.png" width="48" height="48">
    <h2>The Chromium Projects</h2>
  </a>
  <div id="search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20" aria-hidden="true"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"><svg width="15" height="15" class="DocSearch-Control-Key-Icon"><path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square"></path></svg></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div>
</header>

<div id="main-wrapper">
  <nav id="sidebar-left">
    <section>
      <a href="/chromium-projects">Home</a>
      <a href="/Home">Chromium</a>
      <a href="/chromium-os">ChromiumOS</a>
    </section>
    <section>
      <h4>Quick links</h4>
      <a href="/for-testers/bug-reporting-guidelines">Report bugs</a>
      <a href="/developers/discussion-groups">Discuss</a>
    </section>
    <section>
      <h4>Other sites</h4>
      <a href="https://blog.chromium.org/">Chromium Blog</a>
      <a href="https://developer.chrome.com/extensions">Google Chrome Extensions</a>
    </section>
    <section id="license" role="complementary">
      Except as otherwise
      <a href="https://developers.google.com/site-policies.html#restrictions">noted</a>,
      the content of this page is licensed under a
      <a href="https://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 license</a>,
      and examples are licensed under the
      <a href="https://chromium.googlesource.com/chromium/src/+/HEAD/LICENSE">BSD License</a>.
    </section>
    <section id="privacy" role="complementary">
      <a href="https://policies.google.com/privacy">Privacy</a>
    </section>
    <a id="edit-this-page" href="https://edit.chromium.org/edit?repo=chromium/website/main&amp;file=site/developers/design-documents/create-amazing-password-forms/index.md&amp;ext_google.git=%7B%22repo%22%3A%22chromium%2Fwebsite%22%2C%22ref%22%3A%22main%22%2C%22file%22%3A%22site/developers/design-documents/create-amazing-password-forms/index.md%22%7D">Edit this page</a>
  </nav>
  <main>
    <div class="breadcrumbs">
      <a href="/developers">For Developers</a> &gt;
      <a href="/developers/design-documents">Design Documents</a> &gt;
    </div>
    <h1>Create Amazing Password Forms</h1>
  <p>Web browsers (and other agents, such as password managers) try to make the process of filling out forms as convenient to users as possible, to save time and frustration. However good they are at interpreting web pages, however, there are always a few things you, as a web developer, can make sure to do, to ensure the best experience for your users, by making your web pages accessible.</p>
<h2 id="group-related-fields-in-a-single-form" tabindex="-1"><a class="header-anchor" href="#group-related-fields-in-a-single-form">Group related fields in a single form</a></h2>
<p>Make sure that each authentication process (registration, login or change password) is grouped together in a single &lt;form&gt; element. Don’t combine multiple processes (like registration and login), or skip the &lt;form&gt; element.</p>
<h2 id="use-autocomplete-attributes" tabindex="-1"><a class="header-anchor" href="#use-autocomplete-attributes">Use autocomplete attributes</a></h2>
<p><a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofilling-form-controls%3A-the-autocomplete-attribute">Autocomplete</a> attributes help password managers to infer the purpose of a field in a form, saving them from accidentally saving or autofilling the wrong data. A little annotation can go a long way: some common values for text fields are “username”, “current-password” (login forms and change password forms) and “new-password” (registration and change password forms). See a <a href="/developers/design-documents/form-styles-that-chromium-understands">detailed write-up</a> with examples.</p>
<p>Fields that are not passwords, but should be obscured, such as credit card numbers, may also have a type="password" attribute, but should contain the relevant autocomplete attribute, such as "cc-number" or "cc-csc".</p>
<h2 id="make-sure-form-submission-is-clear" tabindex="-1"><a class="header-anchor" href="#make-sure-form-submission-is-clear">Make sure form submission is clear</a></h2>
<p>Password managers need some indication that a form has been submitted. Try to make sure your web page does one of the following on form submission:</p>
<ul>
<li>Performs a navigation to another page.</li>
<li>Emulates a navigation with <a href="https://developer.mozilla.org/en-US/docs/Web/API/History_API">History.pushState or
History.replaceState</a>,
and removes the password form completely.**</li>
</ul>
<p>In addition, if you perform an asynchronous request with <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> or <a href="https://developers.google.com/web/updates/2015/03/introduction-to-fetch">fetch</a>, make sure that the success status is correctly set in the response headers.</p>
<h2 id="use-hidden-fields-for-implicit-information" tabindex="-1"><a class="header-anchor" href="#use-hidden-fields-for-implicit-information">Use hidden fields for implicit information</a></h2>
<p>On some forms, it is not necessary to include some information, which might be obvious from the context (for example, the username field in a change password form). However, this information is still useful to password managers (there may be multiple accounts associated with a web site, for example), so include a hidden input field containing this information even if it is not directly necessary for your form.</p>
<h2 id="dont-try-to-fool-the-browser" tabindex="-1"><a class="header-anchor" href="#dont-try-to-fool-the-browser">Don’t try to fool the browser</a></h2>
<p>Password managers (either built into the browser, or external) are designed to ease the user experience. Inserting fake fields, using incorrect autocomplete attributes or taking advantage of the weaknesses of the existing password managers simply leads to frustrated users.</p>
<h2 id="follow-existing-conventions" tabindex="-1"><a class="header-anchor" href="#follow-existing-conventions">Follow existing conventions</a></h2>
<p>Being different just for the sake of it is not worth it. This will lead to a poor user experience all round. This means, for example, not navigating to a separate web page if a login failed: this is unexpected, and disorienting to both the user and the password manager.</p>
<h2 id="follow-html-guidelines" tabindex="-1"><a class="header-anchor" href="#follow-html-guidelines">Follow HTML guidelines</a></h2>
<p>Web browsers are designed with the HTML specification in mind, and going against it can lead to unexpected issues with your web page. This means:</p>
<ul>
<li>Element id attributes should be unique: no two elements should have the same id.</li>
</ul>

  </main>
</div>
<script>
// Configure Algolia search.
let s = document.createElement('script');
s.src = '/_scripts/@docsearch/index.js';
document.head.append(s);

window.addEventListener('load', () => {
  // Add the Algolia search widget.
  docsearch({
    container: '#search',
    appId: 'RZDQYCCABX',
    apiKey: '98b0eabafeb13fe3e1af693d5713d8b4',
    indexName: 'chromium'
  });
});

// Configure Google Universal Analytics (the predecessor to GA4, we should
// delete this when we don't need it any more).
s = document.createElement('script');
s.src = 'https://www.googletagmanager.com/gtag/js?id=UA-5484340-1'
s.async = true;
document.head.append(s)

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-5484340-1');

// Configure consent bar.
s = document.createElement('script');
s.src = 'https://www.gstatic.com/brandstudio/kato/cookie_choice_component/cookie_consent_bar.v3.js'
s.dataset.autoloadCookieConsentBar = true;
s.dataset.autoloadCookieContentBarIntlCode = '';
document.head.append(s);</script>
</body></html>