{"id":83143,"date":"2022-08-27T01:48:59","date_gmt":"2022-08-26T23:48:59","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/sign-in-form-best-practices\/"},"modified":"2021-07-06T10:10:26","modified_gmt":"2021-07-06T08:10:26","slug":"sign-in-form-best-practices-2","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/sign-in-form-best-practices-2\/","title":{"rendered":"Meilleures pratiques du formulaire de connexion"},"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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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\/fr\/dev\/sign-in-form-best-practices-2\/#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-5817826' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/missing-field-firefox-android-5817826.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-4510256' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/unstyled-form-4510256.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-9972363' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/unstyled-form-text-9972363.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-2452034' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/styled-signin-form-2452034.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-3839942' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/invalid-email-3839942.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-9829451' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/show-password-9829451.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-83143","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\/fr\/dev\/anmeldeformular-best-practices-2\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\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\/fr\/dev\/anmeldeformular-best-practices-2\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-26T23:48:59+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\\\/de\\\/dev\\\/anmeldeformular-best-practices-2\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/anmeldeformular-best-practices-2\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Sign-in form best practices\",\"datePublished\":\"2022-08-26T23:48:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/anmeldeformular-best-practices-2\\\/\"},\"wordCount\":3541,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/anmeldeformular-best-practices-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1119474.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/anmeldeformular-best-practices-2\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/anmeldeformular-best-practices-2\\\/\",\"name\":\"Sign-in form best practices - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/anmeldeformular-best-practices-2\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/anmeldeformular-best-practices-2\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-1119474.jpg\",\"datePublished\":\"2022-08-26T23:48:59+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\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/anmeldeformular-best-practices-2\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/anmeldeformular-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\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@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":"Sign-in form best practices - R Marketing Digital","description":"Utilisez les fonctionnalit\u00e9s de navigateur multiplateforme pour cr\u00e9er des formulaires de connexion s\u00e9curis\u00e9s, accessibles et faciles \u00e0 utiliser. 29 juin 2020 Mis \u00e0 jour le 20 ao\u00fbt 2020 Si jamais les utilisateurs","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\/fr\/dev\/anmeldeformular-best-practices-2\/","og_locale":"fr_FR","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\/fr\/dev\/anmeldeformular-best-practices-2\/","og_site_name":"R Marketing Digital","article_published_time":"2022-08-26T23:48:59+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\/de\/dev\/anmeldeformular-best-practices-2\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/anmeldeformular-best-practices-2\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Sign-in form best practices","datePublished":"2022-08-26T23:48:59+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/anmeldeformular-best-practices-2\/"},"wordCount":3541,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/anmeldeformular-best-practices-2\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1119474.jpg","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/anmeldeformular-best-practices-2\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/anmeldeformular-best-practices-2\/","name":"Sign-in form best practices - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/anmeldeformular-best-practices-2\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/anmeldeformular-best-practices-2\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-1119474.jpg","datePublished":"2022-08-26T23:48:59+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Utilisez les fonctionnalit\u00e9s de navigateur multiplateforme pour cr\u00e9er des formulaires de connexion s\u00e9curis\u00e9s, accessibles et faciles \u00e0 utiliser. 29 juin 2020 Mis \u00e0 jour le 20 ao\u00fbt 2020 Si jamais les utilisateurs","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/anmeldeformular-best-practices-2\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/anmeldeformular-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":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","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":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@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\/fr\/wp-json\/wp\/v2\/posts\/83143","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=83143"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/83143\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/83145"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=83143"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=83143"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=83143"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}