{"id":83146,"date":"2022-09-15T01:28:04","date_gmt":"2022-09-14T23:28:04","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/sign-in-form-best-practices\/"},"modified":"2021-07-06T10:09:09","modified_gmt":"2021-07-06T08:09:09","slug":"sign-in-form-best-practices","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/","title":{"rendered":"Best Practices f\u00fcr das Anmeldeformular"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Checklist\" >Checklist<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Use-meaningful-HTML\" >Use meaningful HTML<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Use\" >Use &lt;form&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Use-2\" >Use &lt;label&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Use-3\" >Use &lt;button&gt;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Ensure-successful-form-submission\" >Ensure successful form submission<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Dont-double-up-inputs\" >Don&#8217;t double up inputs<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Make-the-most-of-element-attributes\" >Make the most of element attributes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Help-users-start-faster\" >Help users start faster<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Keep-passwords-private%E2%80%94but-enable-users-to-see-them-if-they-want\" >Keep passwords private\u2014but enable users to see them if they want<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Give-mobile-users-the-right-keyboard\" >Give mobile users the right keyboard<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Prevent-mobile-keyboard-from-obstructing-the-Sign-in-button\" >Prevent mobile keyboard from obstructing the Sign in button<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Test-on-a-range-of-devices\" >Test on a range of devices<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Consider-using-two-pages\" >Consider using two pages<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Help-users-to-avoid-re-entering-data\" >Help users to avoid re-entering data<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Use-autocomplete%22new-password%22-for-a-new-password\" >Use autocomplete=\"new-password\" for a new password<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Use-autocomplete%22current-password%22-for-an-existing-password\" >Use autocomplete=\"current-password\" for an existing password<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Support-password-managers\" >Support password managers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Enable-the-browser-to-suggest-a-strong-password\" >Enable the browser to suggest a strong password<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Help-save-users-from-accidentally-missing-inputs\" >Help save users from accidentally missing inputs<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Design-for-fingers-and-thumbs\" >Design for fingers and thumbs<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Make-sure-inputs-and-buttons-are-large-enough\" >Make sure inputs and buttons are large enough<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Design-for-thumbs\" >Design for thumbs<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Make-text-big-enough\" >Make text big enough<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Provide-enough-space-between-inputs\" >Provide enough space between inputs<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Make-sure-your-inputs-are-clearly-visible\" >Make sure your inputs are clearly visible<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-27\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Use-built-in-browser-features-to-warn-of-invalid-input-values\" >Use built-in browser features to warn of invalid input values<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-28\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Use-JavaScript-where-necessary\" >Use JavaScript where necessary<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-29\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Toggle-password-display\" >Toggle password display<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-30\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Make-password-inputs-accessible\" >Make password inputs accessible<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-31\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Validate-in-realtime-and-before-submission\" >Validate in realtime and before submission<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-32\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Analytics-and-RUM\" >Analytics and RUM<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-33\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#General-guidelines\" >General guidelines<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-34\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices\/#Keep-learning\" >Keep learning<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use.\n        <\/p>\n<p>\n          <time>Jun 29, 2020<\/time><br \/>\n            Updated <time>Aug 20, 2020<\/time>\n        <\/p>\n<\/header>\n<p>\n  <iframe loading=\"lazy\" title=\"Sign-in form best practice\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/alGcULGtiv8?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/p>\n<p>If users ever need to log in to your site, then good sign-in form design is<br \/>\ncritical. This is especially true for people on poor connections, on mobile, in<br \/>\na hurry, or under stress. Poorly designed sign-in forms get high bounce rates.<br \/>\nEach bounce could mean a lost and disgruntled user\u2014not just a missed sign-in<br \/>\nopportunity.<\/p>\n<p>Here is an example of a simple sign-in form that demonstrates all of the best practices:<\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/sign-in-form?attributionHidden=true&amp;sidebarCollapsed=true&amp;path=index.html&amp;previewSize=100\" style=\"height: 100%; width: 100%; border: 0;\" title=\"sign-in-form on Glitch\"><\/iframe>\n<\/p>\n<h2 id=\"checklist\"><span class=\"ez-toc-section\" id=\"Checklist\"><\/span>Checklist <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>Use meaningful HTML elements: <code>&lt;form&gt;<\/code>, <code>&lt;input&gt;<\/code>,<br \/>\n<code>&lt;label&gt;<\/code>, and <code>&lt;button&gt;<\/code>.<\/li>\n<li>Label each input with a <code>&lt;label&gt;<\/code>.<\/li>\n<li>Use element attributes to access built-in browser<br \/>\nfeatures: <code>type<\/code>, <code>name<\/code>, <code>autocomplete<\/code>, <code>required<\/code>,<br \/>\n<code>autofocus<\/code>.<\/li>\n<li>Give input <code>name<\/code> and <code>id<\/code> attributes stable values that don&#8217;t change<br \/>\nbetween page loads or website deployments.<\/li>\n<li>Put sign-in in its own &lt;form&gt; element.<\/li>\n<li>Ensure successful form submission.<\/li>\n<li>Use <code>autocomplete=\"new-password\"<\/code> for the password input<br \/>\nin a sign-up form, and for the new password in a reset-password form.<\/li>\n<li>Use <code>autocomplete=\"current-password\"<\/code> for a sign-in<br \/>\npassword input.<\/li>\n<li>Provide Show password functionality.<\/li>\n<li>Use <code>aria-label<\/code> and <code>aria-describedby<\/code> for<br \/>\npassword inputs.<\/li>\n<li>Don&#8217;t double-up inputs.<\/li>\n<li>Design forms so the mobile keyboard doesn&#8217;t obscure inputs or<br \/>\nbuttons.<\/li>\n<li>Ensure forms are usable on mobile: use legible text,<br \/>\nand make sure inputs and buttons are large enough to work as touch targets.<\/li>\n<li>Maintain branding and style on your sign-up and sign-in pages.<\/li>\n<li>Test in the field as well as the lab: build page analytics,<br \/>\ninteraction analytics, and user-centric performance measurement into your<br \/>\nsign-up and sign-in flow.<\/li>\n<li>Test across browsers and devices: form behaviour varies<br \/>\nsignificantly across platforms.<\/li>\n<\/ul>\n<div class=\"w-aside w-aside--note\">\n<p>This article is about frontend best practices. It does not explain how to build<br \/>\nbackend services to authenticate users, store their credentials, or manage their<br \/>\naccounts. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cloud.google.com\/blog\/products\/gcp\/12-best-practices-for-user-account\">12 best practices for user account, authorization and password<br \/>\nmanagement<\/a><br \/>\noutlines core principles for running your own backend. If you have users in<br \/>\ndifferent parts of the world, you need to consider localizing your site&#8217;s use of<br \/>\nthird-party identity services as well as its content.<\/p>\n<p>There are also two relatively new APIs not covered in this article which can<br \/>\nhelp you build a better sign-in experience:<\/p>\n<ul>\n<li><strong>Web OTP<\/strong>: to deliver one-time passcodes or<br \/>\nPIN numbers via SMS to mobile phones. This can allow users to select a phone<br \/>\nnumber as an identifier (no need to enter an correo electr\u00f3nico address!) and also enables<br \/>\ntwo-step verification for sign-in and one-time codes for payment confirmation.<\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2016\/04\/credential-management-api\"><strong>Credential Management<\/strong><\/a>: to enable developers to store and retrieve password credentials and federated credentials programmatically.<\/li>\n<\/ul>\n<\/div>\n<h2 id=\"meaningful-html\"><span class=\"ez-toc-section\" id=\"Use-meaningful-HTML\"><\/span>Use meaningful HTML <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Use elements built for the job: <code>&lt;form&gt;<\/code>, <code>&lt;label&gt;<\/code> and <code>&lt;button&gt;<\/code>. These enable<br \/>\nbuilt-in browser functionality, improve accessibility, and add meaning to your<br \/>\nmarkup.<\/p>\n<h3 id=\"form\"><span class=\"ez-toc-section\" id=\"Use\"><\/span>Use <code>&lt;form&gt;<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You might be tempted to wrap inputs in a <code>&lt;div&gt;<\/code> and handle input data<br \/>\nsubmission purely with JavaScript. It&#8217;s generally better to use a plain old<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/form\"><code>&lt;form&gt;<\/code><\/a><br \/>\nelement. This makes your site accessible to screenreaders and other assistive<br \/>\ndevices, enables a range of built-in browser features, makes it simpler to build<br \/>\nbasic functional sign-in for older browsers, and can still work even if<br \/>\nJavaScript fails.<\/p>\n<div class=\"w-aside w-aside--gotchas\">\n<strong>Gotchas!<\/strong> <\/p>\n<p>A common mistake is to wrap a whole web page in a single form, but this is liable<br \/>\nto cause problems for browser password managers and autofill. Use a different<br \/>\n&lt;form&gt; for each UI component that needs a form. For example, if you have<br \/>\nsign-in and search on the same page, you should use two form elements.<\/p>\n<\/div>\n<h3 id=\"label\"><span class=\"ez-toc-section\" id=\"Use-2\"><\/span>Use <code>&lt;label&gt;<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>To label an input, use a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/label\"><code>&lt;label&gt;<\/code><\/a>!<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span> <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>correo electr\u00f3nico<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Correo electr\u00f3nico<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>correo electr\u00f3nico<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">\u2026<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Two reasons:<\/p>\n<ul>\n<li>A tap or click on a label moves focus to its input. Associate a label with an<br \/>\ninput by using the label&#8217;s <code>for<\/code> attribute with the input&#8217;s <code>name<\/code> or <code>id<\/code>.<\/li>\n<li>Screenreaders announce label text when the label or the label&#8217;s input gets<br \/>\nfocus.<\/li>\n<\/ul>\n<p>Don&#8217;t use placeholders as input labels. People are liable to forget what the<br \/>\ninput was for once they&#8217;ve started entering text, especially if they get<br \/>\ndistracted (\u00abWas I entering an correo electr\u00f3nico address, a phone number, or an account<br \/>\nID?\u00bb). There are lots of other potential problems with placeholders: see <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.smashingmagazine.com\/2018\/06\/placeholder-attribute\/\">Don&#8217;t<br \/>\nUse The Placeholder<br \/>\nAttribute<\/a> and<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/articles\/form-design-placeholders\/\">Placeholders in Form Fields Are<br \/>\nHarmful<\/a> if you&#8217;re<br \/>\nunconvinced.<\/p>\n<p>It&#8217;s probably best to put your labels above your inputs. This enables consistent<br \/>\ndesign across mobile and desktop and, according to <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/ai.googleblog.com\/2014\/07\/simple-is-better-making-your-web-forms.html\">Google AI<br \/>\nresearch<\/a>,<br \/>\nenables quicker scanning by users. You get full width labels and inputs, and you<br \/>\ndon&#8217;t need to adjust label and input width to fit the label text.<\/p>\n<figure class=\"w-figure\">\n  <img alt='label-position-9905647' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/label-position-9905647.png' alt=\"Screenshot showing form input label position on mobile: next to input and above input.\" width=\"500\"><figcaption class=\"w-figcaption\">Label and input width is limited when both are on the same line.<\/figcaption><\/figure>\n<p>Open the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/label-position.glitch.me\">label-position<\/a> Glitch on a<br \/>\nmobile device to see for yourself.<\/p>\n<h3 id=\"button\"><span class=\"ez-toc-section\" id=\"Use-3\"><\/span>Use <code>&lt;button&gt;<\/code> <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/button\"><code>&lt;button&gt;<\/code><\/a><br \/>\nfor buttons! Button elements provide accessible behaviour and built-in form<br \/>\nsubmission functionality, and they can easily be styled. There&#8217;s no point in<br \/>\nusing a <code>&lt;div&gt;<\/code> or some other element pretending to be a button.<\/p>\n<p>Ensure that the submit button says what it does. Examples include <strong>Create account<\/strong> or<br \/>\n<strong>Sign in<\/strong>, not <strong>Submit<\/strong> or <strong>Start<\/strong>.<\/p>\n<h3 id=\"submission\"><span class=\"ez-toc-section\" id=\"Ensure-successful-form-submission\"><\/span>Ensure successful form submission <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Help password managers understand that a form has been submitted. There are two<br \/>\nways to do that:<\/p>\n<ul>\n<li>Navigate to a different page.<\/li>\n<li>Emulate navigation with <code>History.pushState()<\/code> or <code>History.replaceState()<\/code>,<br \/>\nand remove the password form.<\/li>\n<\/ul>\n<p>With an <code>XMLHttpRequest<\/code> or <code>fetch<\/code> request, make sure that sign-in success is<br \/>\nreported in the response and handled by taking the form out of the DOM as well<br \/>\nas indicating success to the user.<\/p>\n<p>Consider disabling the <strong>Sign in<\/strong> button once the user has tapped or clicked<br \/>\nit. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/baymard.com\/blog\/users-double-click-online\">Many users click buttons multiple times<\/a><br \/>\neven on sites that are fast and responsive. That slows down interactions and<br \/>\nadds to server load.<\/p>\n<p>Conversely, don&#8217;t disable form submission awaiting user input. For example,<br \/>\ndon&#8217;t disable the <strong>Sign in<\/strong> button if users haven&#8217;t entered their customer<br \/>\nPIN. Users may miss out something in the form, then try repeatedly tapping the<br \/>\n(disabled) <strong>Sign in<\/strong> button and think it&#8217;s not working. At the very least, if<br \/>\nyou must disable form submission, explain to the user what&#8217;s missing when they<br \/>\nclick on the disabled button.<\/p>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Caution:<\/strong><br \/>\nThe default type for a button in a form is <code>submit<\/code>. If you want to add another<br \/>\nbutton in a form (for <strong>Show password<\/strong>, for example) add <code>type=\"button\"<\/code>.<br \/>\nOtherwise clicking or tapping on it will submit the form.<\/p>\n<\/div>\n<h3 id=\"no-double-inputs\"><span class=\"ez-toc-section\" id=\"Dont-double-up-inputs\"><\/span>Don&#8217;t double up inputs <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Some sites force users to enter emails or passwords twice. That might reduce<br \/>\nerrors for a few users, but causes extra work for <em>all<\/em> users, and <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/uxmovement.com\/forms\/why-the-confirm-password-field-must-die\/\">increases<br \/>\nabandonment<br \/>\nrates<\/a>.<br \/>\nAsking twice also makes no sense where browsers autofill correo electr\u00f3nico addresses or<br \/>\nsuggest strong passwords. It&#8217;s better to enable users to confirm their correo electr\u00f3nico<br \/>\naddress (you&#8217;ll need to do that anyway) and make it easy for them to reset their<br \/>\npassword if necessary.<\/p>\n<h2 id=\"element-attributes\"><span class=\"ez-toc-section\" id=\"Make-the-most-of-element-attributes\"><\/span>Make the most of element attributes <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>This is where the magic really happens!<br \/>\nBrowsers have multiple helpful built-in features that use input element attributes.<\/p>\n<h3 id=\"autofocus\"><span class=\"ez-toc-section\" id=\"Help-users-start-faster\"><\/span>Help users start faster <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add an <code>autofocus<\/code> attribute to the first input in your sign-in form. That makes<br \/>\nit clear where to start and, on desktop at least, means users don&#8217;t have to<br \/>\nselect the input to start typing.<\/p>\n<figure class=\"w-figure\">\n  <img alt='autofocus-3741878' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/autofocus-3741878.png' alt=\"Screenshot showing form input with autofocus.\" width=\"500\"><figcaption class=\"w-figcaption\">Autofocus provides clear visual focus on desktop.<\/figcaption><\/figure>\n<h2 id=\"show-password\"><span class=\"ez-toc-section\" id=\"Keep-passwords-private%E2%80%94but-enable-users-to-see-them-if-they-want\"><\/span>Keep passwords private\u2014but enable users to see them if they want <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Passwords inputs should have <code>type=\"password\"<\/code> to hide password text and help the<br \/>\nbrowser understand that the input is for passwords. (Note that browsers use<br \/>\na variety of techniques to understand input roles and decide<br \/>\nwhether or not to offer to save passwords.)<\/p>\n<p>You should add a <strong>Show password<\/strong> icon or button to enable users to check the<br \/>\ntext they&#8217;ve entered\u2014and don&#8217;t forget to add a <strong>Forgot password<\/strong> enlace. See<br \/>\nEnable password display.<\/p>\n<figure class=\"w-figure\">\n  <img alt='show-password-google-8112912' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/show-password-google-8112912.png' alt=\"Google sign-in form showing Show password icon.\" width=\"300\"><figcaption class=\"w-figcaption\">Password input from the Google sign-in form: with <strong>Show password<\/strong> icon and <strong>Forgot password<\/strong> enlace.<\/figcaption><\/figure>\n<h2 id=\"mobile-keyboards\"><span class=\"ez-toc-section\" id=\"Give-mobile-users-the-right-keyboard\"><\/span>Give mobile users the right keyboard <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Use <code>&lt;input type=\"correo electr\u00f3nico\"&gt;<\/code> to give mobile users an appropriate keyboard and<br \/>\nenable basic built-in correo electr\u00f3nico address validation by the browser\u2026 no JavaScript<br \/>\nrequired!<\/p>\n<p>If you need to use a telephone number instead of an correo electr\u00f3nico address, <code>&lt;input type=\"tel\"&gt;<\/code> enables a telephone keypad on mobile. You can also use the<br \/>\n<code>inputmode<\/code> attribute where necessary: <code>inputmode=\"numeric\"<\/code> is ideal for PIN<br \/>\nnumbers. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/css-tricks.com\/everything-you-ever-wanted-to-know-about-inputmode\/\">Everything You Ever Wanted to Know About<br \/>\ninputmode<\/a><br \/>\nhas more detail.<\/p>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Caution:<\/strong><br \/>\n<code>type=\"number\"<\/code> adds an up\/down arrow to increment numbers, so don&#8217;t use it for<br \/>\nnumbers that aren&#8217;t meant to be incremented, such as IDs and account numbers.<\/p>\n<\/div>\n<h3 id=\"keyboard-obstruction\"><span class=\"ez-toc-section\" id=\"Prevent-mobile-keyboard-from-obstructing-the-Sign-in-button\"><\/span>Prevent mobile keyboard from obstructing the <strong>Sign in<\/strong> button <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Unfortunately, if you&#8217;re not careful, mobile keyboards may cover your form or,<br \/>\nworse, partially obstruct the <strong>Sign in<\/strong> button. Users may give up before<br \/>\nrealizing what has happened.<\/p>\n<figure class=\"w-figure\">\n  <img alt='keyboard-not-ok-2240268' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/keyboard-not-ok-2240268.png' alt=\"Two screenshots of a sign-in form on an Android phone: one showing how the Submit button is obscured by the phone keyboard.\" width=\"400\"><figcaption class=\"w-figcaption\">The <b>Sign in<\/b> button: now you see it, now you don&#8217;t.<\/figcaption><\/figure>\n<p>Where possible, avoid this by displaying only the correo electr\u00f3nico\/phone and password inputs and <strong>Sign in<\/strong> button at the top of your sign-in page. Put other content below.<\/p>\n<figure class=\"w-figure\">\n  <img alt='keyboard-ok-8329807' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/keyboard-ok-8329807.png' alt=\"Screenshot of a sign-in form on an Android phone: the Sign in button is not obscured by the phone keyboard.\" width=\"200\"><figcaption class=\"w-figcaption\">The keyboard doesn&#8217;t obstruct the <b>Sign in<\/b> button.<\/figcaption><\/figure>\n<h4 id=\"devices\"><span class=\"ez-toc-section\" id=\"Test-on-a-range-of-devices\"><\/span>Test on a range of devices <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>You&#8217;ll need to test on a range of devices for your target audience, and adjust<br \/>\naccordingly. BrowserStack enables <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.browserstack.com\/open-source\">free testing for de c\u00f3digo abierto<br \/>\nprojects<\/a> on a range of real devices<br \/>\nand browsers.<\/p>\n<figure class=\"w-figure\">\n  <img alt='iphone-keyboard-8814774' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/iphone-keyboard-8814774.png' alt=\"Screenshots of a sign-in form on iPhone 7, 8 and 11. On iPhone 7 and 8 the Sign in button is obscured by the phone keyboard, but not on iPhone 11\"><figcaption class=\"w-figcaption\">The <b>Sign in<\/b> button: obscured on iPhone 7 and 8, but not on iPhone 11.<\/figcaption><\/figure>\n<h4 id=\"two-pages\"><span class=\"ez-toc-section\" id=\"Consider-using-two-pages\"><\/span>Consider using two pages <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Some sites (including Amazon and eBay) avoid the problem by asking for<br \/>\ncorreo electr\u00f3nico\/phone and password on two pages. This approach also simplifies the<br \/>\nexperience: the user is only tasked with one thing at a time.<\/p>\n<figure class=\"w-figure\">\n  <img alt='amazon-signin-mobile-2967125' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/amazon-signin-mobile-2967125.png' alt=\"Screenshot of a sign-in form on the Amazon website: email\/phone and password on two separate 'pages'.\" width=\"400\"><figcaption class=\"w-figcaption\">Two-stage sign-in: correo electr\u00f3nico or phone, then password.<\/figcaption><\/figure>\n<p>Ideally, this should be implemented with a single &lt;form&gt;. Use JavaScript<br \/>\nto initially display only the correo electr\u00f3nico input, then hide it and show the password input.<br \/>\nIf you must force the user to navigate to a new page between entering their correo electr\u00f3nico and<br \/>\npassword, the form on the second page should have a hidden input element with the<br \/>\ncorreo electr\u00f3nico value, to help enable password managers to store the correct value. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.chromium.org\/developers\/design-documents\/form-styles-that-chromium-understands\">Password<br \/>\nForm Styles that Chromium Understands<\/a><br \/>\nprovides a code example.<\/p>\n<h3 id=\"autofill\"><span class=\"ez-toc-section\" id=\"Help-users-to-avoid-re-entering-data\"><\/span>Help users to avoid re-entering data <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You can help browsers store data correctly and autofill inputs, so users don&#8217;t<br \/>\nhave to remember to enter correo electr\u00f3nico and password values. This is particularly important<br \/>\non mobile, and crucial for correo electr\u00f3nico inputs, which get <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.formisimo.com\/blog\/conversion-rate-increases-57-with-form-analytics-case-study\/\">high abandonment rates<\/a>.<\/p>\n<p>There are two parts to this:<\/p>\n<ol>\n<li>\n<p>The <code>autocomplete<\/code>, <code>name<\/code>, <code>id<\/code>, and <code>type<\/code> attributes help browsers understand<br \/>\nthe role of inputs in order to store data that can later be used for autofill.<br \/>\nTo allow data to be stored for autofill, modern browsers also require inputs to<br \/>\nhave a stable <code>name<\/code> or <code>id<\/code> value (not randomly generated on each page load or<br \/>\nsite deployment), and to be in a &lt;form&gt; with a <code>submit<\/code> button.<\/p>\n<\/li>\n<li>\n<p>The <code>autocomplete<\/code> attribute helps browsers correctly autofill inputs using<br \/>\nstored data.<\/p>\n<\/li>\n<\/ol>\n<p>For correo electr\u00f3nico inputs use <code>autocomplete=\"username\"<\/code>, since <code>username<\/code> is recognized<br \/>\nby password managers in modern browsers\u2014even though you should use <code>type=\"correo electr\u00f3nico\"<\/code><br \/>\nand you may want to use <code>id=\"correo electr\u00f3nico\"<\/code> and <code>name=\"correo electr\u00f3nico\"<\/code>.<\/p>\n<p>For password inputs, use the appropriate <code>autocomplete<\/code> value to help browsers<br \/>\ndifferentiate between new and current passwords.<\/p>\n<h3 id=\"new-password\"><span class=\"ez-toc-section\" id=\"Use-autocomplete%22new-password%22-for-a-new-password\"><\/span>Use <code>autocomplete=\"new-password\"<\/code> for a new password <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Use <code>autocomplete=\"new-password\"<\/code> for the password input in a sign-up form, or the new<br \/>\npassword in a change-password form.<\/li>\n<\/ul>\n<h3 id=\"current-password\"><span class=\"ez-toc-section\" id=\"Use-autocomplete%22current-password%22-for-an-existing-password\"><\/span>Use <code>autocomplete=\"current-password\"<\/code> for an existing password <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li>Use <code>autocomplete=\"current-password\"<\/code> for the password input in a sign-in form, or the<br \/>\ninput for the user&#8217;s old password in a change-password form. This tells the<br \/>\nbrowser that you want it to use the current password that it has stored for<br \/>\nthe site.<\/li>\n<\/ul>\n<p>For a sign-up form:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">autocomplete<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>new-password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">\u2026<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>For sign-in:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">autocomplete<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>current-password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">\u2026<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"password-managers\"><span class=\"ez-toc-section\" id=\"Support-password-managers\"><\/span>Support password managers <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Different browsers handle correo electr\u00f3nico autofill and password suggestion somewhat<br \/>\ndifferently, but the effects are much the same. On Safari 11 and above on desktop,<br \/>\nfor example, the password manager is displayed, and then biometric<br \/>\nauthentication (fingerprint or facial recognition) is used if available.<\/p>\n<figure class=\"w-figure\">\n  <img alt='safari-signin-desktop-5278164' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/safari-signin-desktop-5278164.png' alt=\"Screenshots of three stages of sign-in process in Safari on desktop: password manager, biometric authentication, autofill.\"><figcaption class=\"w-figcaption\">Sign-in with autocomplete\u2014no text entry required!<\/figcaption><\/figure>\n<p>Chrome on desktop displays correo electr\u00f3nico suggestions, shows the password manager, and autofills the password.<\/p>\n<figure class=\"w-figure\">\n  <img alt='chrome-signin-desktop-8320339' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/chrome-signin-desktop-8320339.png' alt=\"Screenshots of four stages of sign-in process in Chrome on desktop: email completion, email suggestion, password manager, autofill on selection.\"><figcaption class=\"w-figcaption\">Autocomplete sign-in flow in Chrome 84.<\/figcaption><\/figure>\n<div class=\"w-aside w-aside--caution\">\n<p><strong>Caution:<\/strong><br \/>\nBrowser password and autofill systems are not simple. The algorithms for<br \/>\nguessing, storing and displaying values are not standardized, and vary from<br \/>\nplatform to platform. For example, as pointed out by <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/hiddedevries.nl\/en\/blog\/2018-01-13-making-password-managers-play-ball-with-your-login-form\">Hidde de<br \/>\nVries<\/a>:<br \/>\n\u00abFirefox&#8217;s password manager complements its<br \/>\nheuristics<br \/>\nwith a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=1119454\">recipe system<\/a>.\u00bb<\/p>\n<\/div>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/cloudfour.com\/thinks\/autofill-what-web-devs-should-know-but-dont\">Autofill: What web devs should know, but<br \/>\ndon&#8217;t<\/a><br \/>\nhas a lot more information about using <code>name<\/code> and <code>autocomplete<\/code>. The <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/form-control-infrastructure.html#inappropriate-for-the-control\">HTML<br \/>\nspec<\/a><br \/>\nlists all 59 possible values.<\/p>\n<h3 id=\"password-suggestions\"><span class=\"ez-toc-section\" id=\"Enable-the-browser-to-suggest-a-strong-password\"><\/span>Enable the browser to suggest a strong password <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Modern browsers use heuristics to decide when to show the password manager UI and<br \/>\nsuggest a strong password.<\/p>\n<p>Here&#8217;s how Safari does it on desktop.<\/p>\n<figure class=\"w-figure\">\n  <img alt='safari-password-suggestion-5320039' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/safari-password-suggestion-5320039.png' alt=\"Screenshot of Firefox password manager on desktop.\"><figcaption class=\"w-figcaption\">Password suggestion flow in Safari.<\/figcaption><\/figure>\n<p>(Strong unique password suggestion has been available in Safari since version 12.0.)<\/p>\n<p>Built-in browser password generators mean users and developers don&#8217;t need<br \/>\nto work out what a \u00abstrong password\u00bb is. Since browsers can securely store<br \/>\npasswords and autofill them as necessary, there&#8217;s no need for users to remember<br \/>\nor enter passwords. Encouraging users to take advantage of built-in browser<br \/>\npassword generators also means they&#8217;re more likely to use a unique, strong<br \/>\npassword on your site, and less likely to reuse a password that could be<br \/>\ncompromised elsewhere.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>The downside with this approach is that there&#8217;s no way to share passwords across<br \/>\nplatforms. For example, a user may use Safari on their iPhone and Chrome on<br \/>\ntheir Windows laptop.<\/p>\n<\/div>\n<h3 id=\"required-fields\"><span class=\"ez-toc-section\" id=\"Help-save-users-from-accidentally-missing-inputs\"><\/span>Help save users from accidentally missing inputs <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add the <code>required<\/code> attribute to both correo electr\u00f3nico and password fields.<br \/>\nModern browsers automatically prompt and set focus for missing data.<br \/>\nNo JavaScript required!<\/p>\n<figure class=\"w-figure\">\n  <img alt='missing-field-firefox-android-6121088' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/missing-field-firefox-android-6121088.png' alt=\"Screenshot of desktop Firefox and Chrome for Android showing 'Please fill out this field' prompt for missing data.\" width=\"600\"><figcaption class=\"w-figcaption\">\n    Prompt and focus for missing data on Firefox for desktop (version 76)<br \/>\n    and Chrome for Android (version 83).<br \/>\n  <\/figcaption><\/figure>\n<h2 id=\"mobile-design\"><span class=\"ez-toc-section\" id=\"Design-for-fingers-and-thumbs\"><\/span>Design for fingers and thumbs <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The default browser size for just about everything relating to input elements<br \/>\nand buttons is too small, especially on mobile. This may seem obvious, but it&#8217;s<br \/>\na common problem with sign-in forms on many sites.<\/p>\n<h3 id=\"tap-targets\"><span class=\"ez-toc-section\" id=\"Make-sure-inputs-and-buttons-are-large-enough\"><\/span>Make sure inputs and buttons are large enough <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The default size and padding for inputs and buttons is too small on desktop and<br \/>\neven worse on mobile.<\/p>\n<figure class=\"w-figure\">\n  <img alt='unstyled-form-4548309' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/unstyled-form-4548309.png' alt=\"Screenshot of unstyled form in Chrome for desktop and Chrome for Android.\"><br \/>\n<\/figure>\n<p>According to <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.google.com\/accessibility\/android\/answer\/7101858?hl=en-GB\">Android accessibility<br \/>\nguidance<\/a><br \/>\nthe recommended target size for touchscreen objects is 7\u201310 mm. Apple interface<br \/>\nguidelines suggest 48&#215;48 px, and the W3C suggest <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/target-size.html\">at least 44&#215;44 CSS<br \/>\npixels<\/a>. On that<br \/>\nbasis, add (at least) about 15 px of padding to input elements and buttons for<br \/>\nmobile, and around 10 px on desktop. Try this out with a real mobile device and<br \/>\na real finger or thumb. You should comfortably be able to tap each of your<br \/>\ninputs and buttons.<\/p>\n<p>The Tap targets are not sized appropriately<br \/>\nLighthouse audit can help you automate the process of detecting input elements<br \/>\nthat are too small.<\/p>\n<h4 id=\"design-for-thumbs\"><span class=\"ez-toc-section\" id=\"Design-for-thumbs\"><\/span>Design for thumbs <span class=\"ez-toc-section-end\"><\/span><\/h4>\n<p>Search for <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.google.com\/search?q=touch+target\">touch target<\/a> and<br \/>\nyou&#8217;ll see lots of pictures of forefingers. However, in the real world, many<br \/>\npeople use their thumbs to interact with phones. Thumbs are bigger than<br \/>\nforefingers, and control is less precise. All the more reason for adequately<br \/>\nsized touch targets.<\/p>\n<h3 id=\"size-text-correctly\"><span class=\"ez-toc-section\" id=\"Make-text-big-enough\"><\/span>Make text big enough <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As with size and padding, the default browser font size for input elements and<br \/>\nbuttons is too small, particularly on mobile.<\/p>\n<figure class=\"w-figure\">\n  <img alt='unstyled-form-text-6480199' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/unstyled-form-text-6480199.png' alt=\"Screenshot of unstyled form in Chrome on desktop and on Android.\"><figcaption class=\"w-figcaption\">Default styling on desktop and mobile: input text is too small to be legible for many users.<\/figcaption><\/figure>\n<p>Browsers on different platforms size fonts differently, so it&#8217;s difficult to<br \/>\nspecify a particular font size that works well everywhere. A quick survey of<br \/>\npopular websites shows sizes of 13\u201316 pixels on desktop: matching that physical size<br \/>\nis a good minimum for text on mobile.<\/p>\n<p>This means you need to use a larger pixel size on mobile: <code>16px<\/code> on Chrome for<br \/>\ndesktop is quite legible, but even with good vision it&#8217;s difficult to read <code>16px<\/code><br \/>\ntext on Chrome for Android. You can set different font pixel sizes for different<br \/>\nviewport sizes using <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/responsive#apply_media_queries_based_on_viewport_size\">media<br \/>\nqueries<\/a>.<br \/>\n<code>20px<\/code> is about right on mobile\u2014but you should test this out with friends or<br \/>\ncolleagues who have low vision.<\/p>\n<p>The Document doesn&#8217;t use legible font sizes<br \/>\nLighthouse audit can help you automate the process of detecting text that&#8217;s too<br \/>\nsmall.<\/p>\n<h3 id=\"size-margins-correctly\"><span class=\"ez-toc-section\" id=\"Provide-enough-space-between-inputs\"><\/span>Provide enough space between inputs <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Add enough margin to make inputs work well as touch targets. In other words, aim<br \/>\nfor about a finger width of margin.<\/p>\n<h3 id=\"visible-inputs\"><span class=\"ez-toc-section\" id=\"Make-sure-your-inputs-are-clearly-visible\"><\/span>Make sure your inputs are clearly visible <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The default border styling for inputs makes them hard to see. They&#8217;re almost<br \/>\ninvisible on some platforms such as Chrome for Android.<\/p>\n<p>As well as padding, add a border: on a white background, a good general rule is<br \/>\nto use <code>#ccc<\/code> or darker.<\/p>\n<figure class=\"w-figure\">\n  <img alt='styled-signin-form-2475177' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/styled-signin-form-2475177.png' alt=\"Screenshot of styled form in Chrome on Android.\" width=\"250\"><figcaption class=\"w-figcaption\">Legible text, visible input borders, adequate padding and margins.<\/figcaption><\/figure>\n<h3 id=\"validation\"><span class=\"ez-toc-section\" id=\"Use-built-in-browser-features-to-warn-of-invalid-input-values\"><\/span>Use built-in browser features to warn of invalid input values <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Browsers have built-in features to do basic form validation for inputs with a<br \/>\n<code>type<\/code> attribute. Browsers warn when you submit a form with an invalid value,<br \/>\nand set focus on the problematic input.<\/p>\n<figure class=\"w-figure\">\n  <img alt='invalid-email-8970741' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/invalid-email-8970741.png' alt=\"Screenshot of a sign-in form in Chrome on desktop showing browser prompt and focus for an invalid email value.\" width=\"300\"><figcaption class=\"w-figcaption\">Basic built-in validation by the browser.<\/figcaption><\/figure>\n<p>You can use the <code>:invalid<\/code> CSS selector to highlight invalid data. Use<br \/>\n<code>:not(:placeholder-shown)<\/code> to avoid selecting inputs with no content.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">input[type=email]:not(:placeholder-shown):invalid<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">color<\/span><span class=\"token punctuation\">:<\/span> red<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">outline-color<\/span><span class=\"token punctuation\">:<\/span> red<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Try out different ways of highlighting inputs with invalid values.<\/p>\n<h2 id=\"javascript\"><span class=\"ez-toc-section\" id=\"Use-JavaScript-where-necessary\"><\/span>Use JavaScript where necessary <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"password-display\"><span class=\"ez-toc-section\" id=\"Toggle-password-display\"><\/span>Toggle password display <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>You should add a <strong>Show password<\/strong> icon or button to enable users to check the<br \/>\ntext they&#8217;ve entered. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/articles\/stop-password-masking\/\">Usability<br \/>\nsuffers<\/a> when users<br \/>\ncan&#8217;t see the text they&#8217;ve entered. Currently there&#8217;s no built-in way to do<br \/>\nthis, though <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/sw12\/status\/1251191795377156099\">there are plans for<br \/>\nimplementation<\/a>. You&#8217;ll<br \/>\nneed to use JavaScript instead.<\/p>\n<figure class=\"w-figure\">\n  <img alt='show-password-google-8112912' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/show-password-google-8112912.png' alt=\"Google sign-in form showing Show password icon.\" width=\"350\"><figcaption class=\"w-figcaption\">Google sign-in form: with <strong>Show password<\/strong> icon and <strong>Forgot password<\/strong> enlace.<\/figcaption><\/figure>\n<p>The following code uses a text button to add <strong>Show password<\/strong> functionality.<\/p>\n<p>HTML:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"highlight-line\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>section<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/span><br><span class=\"highlight-line\">  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>label<\/span> <span class=\"token attr-name\">for<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Password<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>label<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/span><br><mark class=\"highlight-line highlight-line-active\">  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>toggle-password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>button<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">aria-label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Show password as plain text. Warning: this will display your password on the screen.<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Show password<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/mark><br><span class=\"highlight-line\">  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">name<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">autocomplete<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>current-password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">required<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/span><br><span class=\"highlight-line\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>section<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Here&#8217;s the CSS to make the button look like plain text:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><span class=\"token selector\">button#toggle-password<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">background<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">border<\/span><span class=\"token punctuation\">:<\/span> none<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">cursor<\/span><span class=\"token punctuation\">:<\/span> pointer<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">font-size<\/span><span class=\"token punctuation\">:<\/span> <span class=\"token function\">var<\/span><span class=\"token punctuation\">(<\/span>--mobile-font-size<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token property\">font-weight<\/span><span class=\"token punctuation\">:<\/span> 300<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">padding<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">position<\/span><span class=\"token punctuation\">:<\/span> absolute<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">top<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br><span class=\"token property\">right<\/span><span class=\"token punctuation\">:<\/span> 0<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>And the JavaScript for showing the password:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> passwordInput <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'password'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> togglePasswordButton <span class=\"token operator\">=<\/span> document<span class=\"token punctuation\">.<\/span><span class=\"token function\">getElementById<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'toggle-password'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p>togglePasswordButton<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'click'<\/span><span class=\"token punctuation\">,<\/span> togglePassword<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><span class=\"token keyword\">function<\/span> <span class=\"token function\">togglePassword<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>passwordInput<span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">===<\/span> <span class=\"token string\">'password'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>passwordInput<span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">=<\/span> <span class=\"token string\">'text'<\/span><span class=\"token punctuation\">;<\/span><br>togglePasswordButton<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token string\">'Hide password'<\/span><span class=\"token punctuation\">;<\/span><br>togglePasswordButton<span class=\"token punctuation\">.<\/span><span class=\"token function\">setAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'aria-label'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token string\">'Hide password.'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br>passwordInput<span class=\"token punctuation\">.<\/span>type <span class=\"token operator\">=<\/span> <span class=\"token string\">'password'<\/span><span class=\"token punctuation\">;<\/span><br>togglePasswordButton<span class=\"token punctuation\">.<\/span>textContent <span class=\"token operator\">=<\/span> <span class=\"token string\">'Show password'<\/span><span class=\"token punctuation\">;<\/span><br>togglePasswordButton<span class=\"token punctuation\">.<\/span><span class=\"token function\">setAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'aria-label'<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token string\">'Show password as plain text. '<\/span> <span class=\"token operator\">+<\/span><br><span class=\"token string\">'Warning: this will display your password on the screen.'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Here&#8217;s the end result:<\/p>\n<figure class=\"w-figure\">\n  <img alt='show-password-8771490' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/show-password-8771490.png' alt=\"Screenshots of sign-in form with Show password text 'button', in Safari on Mac and on iPhone 7.\" width=\"800\"><figcaption class=\"w-figcaption\">Sign-in form with <strong>Show password<\/strong> text &#8216;button&#8217;, in Safari on Mac and iPhone 7.<\/figcaption><\/figure>\n<h3 id=\"accessible-password-inputs\"><span class=\"ez-toc-section\" id=\"Make-password-inputs-accessible\"><\/span>Make password inputs accessible <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use <code>aria-describedby<\/code> to outline password rules by giving it the ID of the<br \/>\nelement that describes the constraints. Screenreaders provide the label text, the<br \/>\ninput type (password), and then the description.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>input<\/span> <span class=\"token attr-name\">type<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>password<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">aria-describedby<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>password-constraints<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">\u2026<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>div<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>password-constraints<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span>Eight or more characters with a mix of letters, numbers and symbols.<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>div<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>When you add <strong>Show password<\/strong> functionality, make sure to include<br \/>\nan <code>aria-label<\/code> to warn that the password will be displayed. Otherwise users may<br \/>\ninadvertently reveal passwords.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>button<\/span> <span class=\"token attr-name\">id<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>toggle-password<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">aria-label<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>Show password as plain text.<br>Warning: this will display your password on the screen.<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"highlight-line\">  Show password<\/span><br><span class=\"highlight-line\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>button<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>You can see both ARIA features in action in the following Glitch:<\/p>\n<p>\n  <iframe allow=\"camera; clipboard; clipboard-read; clipboard-write; encrypted-media; geolocation; microphone; midi; vr\" loading=\"lazy\" src=\"https:\/\/glitch.com\/embed\/#!\/embed\/signin-form?attributionHidden=true&amp;sidebarCollapsed=true&amp;path=index.html&amp;previewSize=100\" style=\"height: 100%; width: 100%; border: 0;\" title=\"signin-form on Glitch\"><\/iframe>\n<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webaim.org\/techniques\/forms\/\">Creating Accessible Forms<\/a> has more tips to help make forms accessible.<\/p>\n<h3 id=\"validation\"><span class=\"ez-toc-section\" id=\"Validate-in-realtime-and-before-submission\"><\/span>Validate in realtime and before submission <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>HTML form elements and attributes have built-in features for basic validation,<br \/>\nbut you should also use JavaScript to do more robust validation while users are<br \/>\nentering data and when they attempt to submit the form.<\/p>\n<div class=\"w-aside w-aside--warning\">\n<p><strong>Warning:<\/strong><br \/>\nClient-side validation helps users enter data and can avoid unnecessary server<br \/>\nload, but you must always validate and sanitize data on your backend.<\/p>\n<\/div>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/edit\/#!\/signin-form-codelab-5\">Step 5<\/a> of the sign-in form<br \/>\ncodelab uses the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/forms.html#constraints\">Constraint Validation<br \/>\nAPI<\/a> (which is<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=constraint-validation\">widely supported<\/a>) to add<br \/>\ncustom validation using built-in browser UI to set focus and display prompts.<\/p>\n<p>Find out more: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/fundamentals\/design-and-ux\/input\/forms#use_javascript_for_more_complex_real-time_validation\">Use JavaScript for more complex real-time<br \/>\nvalidation<\/a>.<\/p>\n<h3 id=\"analytics\"><span class=\"ez-toc-section\" id=\"Analytics-and-RUM\"><\/span>Analytics and RUM <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00abWhat you cannot measure, you cannot improve\u00bb is particularly true for sign-up<br \/>\nand sign-in forms. You need to set goals, measure success, improve your site\u2014and<br \/>\nrepeat.<\/p>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.nngroup.com\/articles\/discount-usability-20-years\/\">Discount usability<br \/>\ntesting<\/a> can be<br \/>\nhelpful for trying out changes, but you&#8217;ll need real-world data to really<br \/>\nunderstand how your users experience your sign-up and sign-in forms:<\/p>\n<ul>\n<li><strong>Page analytics<\/strong>: sign-up and sign-in page views, bounce rates,<br \/>\nand exits.<\/li>\n<li><strong>Interaction analytics<\/strong>: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.google.com\/analytics\/answer\/6180923?hl=en\">goal<br \/>\nfunnels<\/a> (where do<br \/>\nusers abandon your sign-in or sign-in flow?) and<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/analytics\/devguides\/collection\/gtagjs\/events\">events<\/a><br \/>\n(what actions do users take when interacting with your forms?)<\/li>\n<li><strong>Website performance<\/strong>: user-centric<br \/>\nmetrics (are your sign-up and sign-in<br \/>\nforms slow for some reason and, if so, what is the cause?).<\/li>\n<\/ul>\n<p>You may also want to consider implementing A\/B testing in order to try out<br \/>\ndifferent approaches to sign-up and sign-in, and staged rollouts to validate the<br \/>\nchanges on a subset of users before releasing changes to all users.<\/p>\n<h2 id=\"general-guidelines\"><span class=\"ez-toc-section\" id=\"General-guidelines\"><\/span>General guidelines <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Well designed UI and UX can reduce sign-in form abandonment:<\/p>\n<ul>\n<li>Don&#8217;t make users hunt for sign-in! Put a enlace to the sign-in form at the top<br \/>\nof the page, using well-understood wording such as <strong>Sign In<\/strong>, <strong>Create Account<\/strong><br \/>\nor <strong>Register<\/strong>.<\/li>\n<li>Keep it focused! Sign-up forms are not the place to distract people with<br \/>\noffers and other site features.<\/li>\n<li>Minimize sign-up complexity. Collect other user data (such as addresses or<br \/>\ncredit card details) only when users see a clear benefit from providing that<br \/>\ndata.<\/li>\n<li>Before users start on your sign-up form, make it clear what the value<br \/>\nproposition is. How do they benefit from signing in? Give users concrete<br \/>\nincentives to complete sign-up.<\/li>\n<li>If possible allow users to identify themselves with a mobile phone number<br \/>\ninstead of an correo electr\u00f3nico address, since some users may not use correo electr\u00f3nico.<\/li>\n<li>Make it easy for users to reset their password, and make the <strong>Forgot your<br \/>\npassword?<\/strong> enlace obvious.<\/li>\n<li>Enlace to your terms of service and privacy policy documents: make it clear to<br \/>\nusers from the start how you safeguard their data.<\/li>\n<li>Include the logo and name of your company or organization on your signup and<br \/>\nsign-in pages, and make sure that language, fonts and styles match the rest of<br \/>\nyour site. Some forms don&#8217;t feel like they belong to the same site as other<br \/>\ncontent, especially if they have a significantly different URL.<\/li>\n<\/ul>\n<h2 id=\"resources\"><span class=\"ez-toc-section\" id=\"Keep-learning\"><\/span>Keep learning <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Photo by <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\/photos\/_XFObcM_7KU\">Meghan Schiereck<\/a> on <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/unsplash.com\">Unsplash<\/a>.<\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. Jun 29, 2020 Updated Aug 20, 2020 If users ever need to log in&#8230;<\/p>","protected":false},"author":1,"featured_media":83145,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83146","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Sign-in form best practices - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. Jun 29, 2020 Updated Aug 20, 2020 If users ever\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices-2\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sign-in form best practices\" \/>\n<meta property=\"og:description\" content=\"Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. Jun 29, 2020 Updated Aug 20, 2020 If users ever\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices-2\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-14T23:28:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1119474.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"569\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Sign-in form best practices\",\"datePublished\":\"2022-09-14T23:28:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/\"},\"wordCount\":3541,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1119474.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/\",\"name\":\"Sign-in form best practices - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1119474.jpg\",\"datePublished\":\"2022-09-14T23:28:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. Jun 29, 2020 Updated Aug 20, 2020 If users ever\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/en\\\/dev\\\/sign-in-form-best-practices-2\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1119474.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1119474.jpg\",\"width\":1200,\"height\":569,\"caption\":\"hero-1119474-5778350-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Best Practices f\u00fcr Anmeldeformulare \u2013 R Digital Marketing","description":"Verwenden Sie plattform\u00fcbergreifende Browserfunktionen, um Anmeldeformulare zu erstellen, die sicher, zug\u00e4nglich und benutzerfreundlich sind. 29. Juni 2020 Aktualisiert 20. August 2020 Wenn Benutzer jemals","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices-2\/","og_locale":"de_DE","og_type":"article","og_title":"Sign-in form best practices","og_description":"Use cross-platform browser features to build sign-in forms that are secure, accessible and easy to use. Jun 29, 2020 Updated Aug 20, 2020 If users ever","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/sign-in-form-best-practices-2\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-14T23:28:04+00:00","og_image":[{"width":1200,"height":569,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1119474.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Sign-in form best practices","datePublished":"2022-09-14T23:28:04+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/"},"wordCount":3541,"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1119474.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/","url":"https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/","name":"Best Practices f\u00fcr Anmeldeformulare \u2013 R Digital Marketing","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1119474.jpg","datePublished":"2022-09-14T23:28:04+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Verwenden Sie plattform\u00fcbergreifende Browserfunktionen, um Anmeldeformulare zu erstellen, die sicher, zug\u00e4nglich und benutzerfreundlich sind. 29. Juni 2020 Aktualisiert 20. August 2020 Wenn Benutzer jemals","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/en\/dev\/sign-in-form-best-practices-2\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1119474.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1119474.jpg","width":1200,"height":569,"caption":"hero-1119474-5778350-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83146"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83146\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83145"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}