Sign-in form best practices

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 to your site, then good sign-in form design is
critical. This is especially true for people on poor connections, on mobile, in
a hurry, or under stress. Poorly designed sign-in forms get high bounce rates.
Each bounce could mean a lost and disgruntled user—not just a missed sign-in
opportunity.

Here is an example of a simple sign-in form that demonstrates all of the best practices:

Checklist

• Use meaningful HTMLHTML (Hypertext Markup Language) se usa para estructurar el contenido de texto de un documento web. No sólo se marca el contenido, sino además la meta-información que describe este contenido. Las páginas HTML se almacenan normalmente en el directorio raíz del servidor. Cómo se creó En la era digital, a los usuarios les resulta difícil hallar su camino en las webs y hacer un seguimiento de las estructuras de las más elements: <form>, <input>,
  <label>, and <button>.
• Label each input with a <label>.
• Use element attributes to access built-in browser
  features: type, name, autocomplete, required,
  autofocus.
• Give input name and id attributes stable values that don’t change
  between page loads or website deployments.
• Put sign-in in its own <form> element.
• Ensure successful form submission.
• Use autocomplete="new-password" for the password input
  in a sign-up form, and for the new password in a reset-password form.
• Use autocomplete="current-password" for a sign-in
  password input.
• Provide Show password functionality.
• Use aria-label and aria-describedby for
  password inputs.
• Don’t double-up inputs.
• Design forms so the mobile keyboard doesn’t obscure inputs or
  buttons.
• Ensure forms are usable on mobile: use legible text,
  and make sure inputs and buttons are large enough to work as touch targets.
• Maintain brandingBranding es una definición del marketing clásico y es la práctica de crear un nombre, símbolo o diseño que identifique y diferencie un producto de otros. Una estrategia de marca eficaz te proporciona una gran utilidad en mercados cada vez más competitivos. Campañas de branding en marketing En las campañas de branding, se hace especial hincapié en el uso de la marca propia de una empresa en la promoción comercial. más and style on your sign-up and sign-in pages.
• Test in the field as well as the lab: build page analytics,
  interaction analytics, and user-centric performanceEn el caso de las webs, el término Performance o rendimiento, se refiere a la velocidad de carga o a la potencia de cálculo de un servidor, es decir, a la velocidad a la que se transmiten los datos del servidor al cliente. Razones para una buena performance Una web que se carga lentamente, puede animar a los clientes potenciales a abandonar la página. Para asegurar una interacción fluida, se tiene más measurement into your
  sign-up and sign-in flow.
• Test across browsers and devices: form behaviour varies
  significantly across platforms.

Use meaningful HTML

Use elements built for the job: <form>, <label> and <button>. These enable
built-in browser functionality, improve accessibility, and add meaning to your
markupEn la optimización de motores de búsqueda, el término markup (o marcado) incluye la oportunidad de añadir información adicional para los motores de búsqueda a los datos en el código fuente. Las marcas de revisión en lenguajes de marcado estandarizados se usan para estructurar el código fuente y facilitar a los motores de búsqueda la comprensión de cómo se procesan las marcas de revisión. El contenido o el código fuente más.

Use <form>

You might be tempted to wrap inputs in a <div> and handle input data
submission purely with JavaScriptJavaScript es un lenguaje de programación que funciona en el lado del cliente y con el que las webs pueden ser más funcionales. Incorporación en código HTML El código JavaScript puede ser incrustado en las páginas HTML, para que adquieran funcionalidad. Existen varias opciones. Puede estar entre las etiquetas <SCRIPT> y </SCRIPT>, puede estar contenido en un archivo externo, puede ser un parámetro de las etiquetas HTML, y puede estar más. It’s generally better to use a plain old
<form>
element. This makes your site accessible to screenreaders and other assistive
devices, enables a range of built-in browser features, makes it simpler to build
basic functional sign-in for older browsers, and can still work even if
JavaScript fails.

Use <label>

To label an input, use a <label>!

<label for="correo electrónico">Correo electrónico</label>
<input id="correo electrónico" …>

Two reasons:

• A tap or click¿Qué es un click?Es la acción de pulsar un botón del ratón una vez colocado el puntero del mismo sobre un elemento determinado de la pantalla. El click determina la interacción del usuario con el sistema.Otras denominaciones: Clic más on a label moves focus to its input. Associate a label with an
  input by using the label’s for attribute with the input’s name or id.
• Screenreaders announce label text when the label or the label’s input gets
  focus.

Don’t use placeholders as input labels. People are liable to forget what the
input was for once they’ve started entering text, especially if they get
distracted («Was I entering an correo electrónico address, a phone number, or an account
ID?»). There are lots of other potential problems with placeholders: see Don’t
Use The Placeholder
Attribute and
Placeholders in Form Fields Are
Harmful if you’re
unconvinced.

It’s probably best to put your labels above your inputs. This enables consistent
design across mobile and desktop and, according to Google AI
research,
enables quicker scanning by users. You get full width labels and inputs, and you
don’t need to adjust label and input width to fit the label text.

Open the label-position Glitch on a
mobile device to see for yourself.

Use <button>

Use <button>
for buttons! Button elements provide accessible behaviour and built-in form
submission functionality, and they can easily be styled. There’s no point in
using a <div> or some other element pretending to be a button.

Ensure that the submit button says what it does. Examples include Create account or
Sign in, not Submit or Start.

Ensure successful form submission

Help password managers understand that a form has been submitted. There are two
ways to do that:

• Navigate to a different page.
• Emulate navigation with History.pushState() or History.replaceState(),
  and remove the password form.

With an XMLHttpRequest or fetch request, make sure that sign-in success is
reported in the response and handled by taking the form out of the DOM as well
as indicating success to the user.

Consider disabling the Sign in button once the user has tapped or clicked
it. Many users click buttons multiple times
even on sites that are fast and responsive. That slows down interactions and
adds to server load.

Conversely, don’t disable form submission awaiting user input. For example,
don’t disable the Sign in button if users haven’t entered their customer
PIN. Users may miss out something in the form, then try repeatedly tapping the
(disabled) Sign in button and think it’s not working. At the very least, if
you must disable form submission, explain to the user what’s missing when they
click on the disabled button.

Don’t double up inputs

Some sites force users to enter emails or passwords twice. That might reduce
errors for a few users, but causes extra work for all users, and increases
abandonment
rates.
Asking twice also makes no sense where browsers autofill correo electrónico addresses or
suggest strong passwords. It’s better to enable users to confirm their correo electrónico
address (you’ll need to do that anyway) and make it easy for them to reset their
password if necessary.

Make the most of element attributes

This is where the magic really happens!
Browsers have multiple helpful built-in features that use input element attributes.

Help users start faster

Add an autofocus attribute to the first input in your sign-in form. That makes
it clear where to start and, on desktop at least, means users don’t have to
select the input to start typing.

Keep passwords private—but enable users to see them if they want

Passwords inputs should have type="password" to hide password text and help the
browser understand that the input is for passwords. (Note that browsers use
a variety of techniques to understand input roles and decide
whether or not to offer to save passwords.)

You should add a Show password icon or button to enable users to check the
text they’ve entered—and don’t forget to add a Forgot password enlaceConcepto de Dominio¿Qué es un Enlace?En Internet, un link, además conocido como enlace o hipervínculo, es cualquier texto o imagen que se encuentra en una página web y en la que el usuario puede pulsar o clicar para ser dirigido a otro contenido distinto. Es el principal medio de “desplazamiento” en la red, puesto que se encuentra presente en prácticamente cualquier portal que visites a día de hoy, inclusive en más. See
Enable password display.

Give mobile users the right keyboard

Use <input type="correo electrónico"> to give mobile users an appropriate keyboard and
enable basic built-in correo electrónico address validation by the browser… no JavaScript
required!

If you need to use a telephone number instead of an correo electrónico address, <input type="tel"> enables a telephone keypad on mobile. You can also use the
inputmode attribute where necessary: inputmode="numeric" is ideal for PIN
numbers. Everything You Ever Wanted to Know About
inputmode
has more detail.

Prevent mobile keyboard from obstructing the Sign in button

Unfortunately, if you’re not careful, mobile keyboards may cover your form or,
worse, partially obstruct the Sign in button. Users may give up before
realizing what has happened.

Where possible, avoid this by displaying only the correo electrónico/phone and password inputs and Sign in button at the top of your sign-in page. Put other content below.

Test on a range of devices

You’ll need to test on a range of devices for your targetConcepto de Target¿Qué es el Target?El Target es uno de los conceptos primordiales del marketing. Se usa para hablar del público al que se destinan las acciones y estrategias de cualquier campaña publicitaria o comercial. Es el objetivo al que ha de hablarle marca para suministrarle sus servicios o productos, aquellos a los que les interesa lo que brindan o pueda resultarle interesante por afinidad o por necesidades.Es uno de más audience, and adjust
accordingly. BrowserStack enables free testing for de código abiertoEl Código Abierto u Open Source se refiere al código fuente del software que es abiertamente alcanzable y que puede ser cambiado y distribuido por cualquier persona. La propuesta de código abierto estipula diez requerimientos para las licencias de software de código abierto. El principio El código fuente de un software se hace público: cualquiera puede leerlo, desarrollar el propio software y copiarlo. El software puede ser utilizado o distribuido más
projects on a range of real devices
and browsers.

Consider using two pages

Some sites (including AmazonConcepto de Amazon¿Qué es Amazon?Amazon es la tienda online más importante de todas partes (haz un clic aquí para ver la web de Amazon). Se trata del icono más representativo del e-commerce y de una de las webs más frecuentadas por los usuarios de medio planeta. Cuenta con un catálogo repleto de productos de todos los tipos y sectores y con precios y condiciones que suelen atraer las miradas de más and eBayConcepto de Ebay¿Qué es Ebay?Ebay es una página web considerada como uno de los mayores puntos de compra y venta de todo el panorama digital. Es un punto de encuentro entre compradores y vendedores, que pueden ser tanto profesionales como particulares, que permite la realización de ventas mediante de Internet, sin necesidad de contar con un establecimiento físico en el que llevar a término los trámites.Una plataforma que, en cierto más) avoid the problem by asking for
correo electrónico/phone and password on two pages. This approach also simplifies the
experience: the user is only tasked with one thing at a time.

Ideally, this should be implemented with a single <form>. Use JavaScript
to initially display only the correo electrónico input, then hide it and show the password input.
If you must force the user to navigate to a new page between entering their correo electrónico and
password, the form on the second page should have a hidden input element with the
correo electrónico value, to help enable password managers to store the correct value. Password
Form Styles that Chromium Understands
provides a code example.

Help users to avoid re-entering data

You can help browsers store data correctly and autofill inputs, so users don’t
have to remember to enter correo electrónico and password values. This is particularly important
on mobile, and crucial for correo electrónico inputs, which get high abandonment rates.

There are two parts to this:

1. The autocomplete, name, id, and type attributes help browsers understand
   the role of inputs in order to store data that can later be used for autofill.
   To allow data to be stored for autofill, modern browsers also require inputs to
   have a stable name or id value (not randomly generated on each page load or
   site deployment), and to be in a <form> with a submit button.

2. The autocomplete attribute helps browsers correctly autofill inputs using
   stored data.

For correo electrónico inputs use autocomplete="username", since username is recognized
by password managers in modern browsers—even though you should use type="correo electrónico"
and you may want to use id="correo electrónico" and name="correo electrónico".

For password inputs, use the appropriate autocomplete value to help browsers
differentiate between new and current passwords.

Use autocomplete="new-password" for a new password

• Use autocomplete="new-password" for the password input in a sign-up form, or the new
  password in a change-password form.

Use autocomplete="current-password" for an existing password

• Use autocomplete="current-password" for the password input in a sign-in form, or the
  input for the user’s old password in a change-password form. This tells the
  browser that you want it to use the current password that it has stored for
  the site.

For a sign-up form:

<input type="password" autocomplete="new-password" …>

For sign-in:

<input type="password" autocomplete="current-password" …>

Support password managers

Different browsers handle correo electrónico autofill and password suggestion somewhat
differently, but the effects are much the same. On Safari 11 and above on desktop,
for example, the password manager is displayed, and then biometric
authentication (fingerprint or facial recognition) is used if available.

Chrome on desktop displays correo electrónico suggestions, shows the password manager, and autofills the password.

Autofill: What web devs should know, but
don’t
has a lot more information about using name and autocomplete. The HTML
spec
lists all 59 possible values.

Enable the browser to suggest a strong password

Modern browsers use heuristics to decide when to show the password manager UI and
suggest a strong password.

Here’s how Safari does it on desktop.

(Strong unique password suggestion has been available in Safari since version 12.0.)

Built-in browser password generators mean users and developers don’t need
to work out what a «strong password» is. Since browsers can securely store
passwords and autofill them as necessary, there’s no need for users to remember
or enter passwords. Encouraging users to take advantage of built-in browser
password generators also means they’re more likely to use a unique, strong
password on your site, and less likely to reuse a password that could be
compromised elsewhere.

Help save users from accidentally missing inputs

Add the required attribute to both correo electrónico and password fields.
Modern browsers automatically prompt and set focus for missing data.
No JavaScript required!

Design for fingers and thumbs

The default browser size for just about everything relating to input elements
and buttons is too small, especially on mobile. This may seem obvious, but it’s
a common problem with sign-in forms on many sites.

Make sure inputs and buttons are large enough

The default size and padding for inputs and buttons is too small on desktop and
even worse on mobile.

According to Android accessibility
guidance
the recommended target size for touchscreen objects is 7–10 mm. Apple interface
guidelines suggest 48×48 px, and the W3CEl W3C (World Wide Web Consortium) es un comité que se dedica a poner en práctica tecnologías uniformes en el uso y desarrollo de Internet. El organismo fue fundado en el MIT en Cambridge, Massachusetts, EE.UU. en 1994. El objetivo del W3C es uniformar las especificaciones técnicas y determinar directrices para el desarrollo de tecnologías web, de forma que se mantenga la idea básica de la World Wide Web. Tecnologías más suggest at least 44×44 CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a más
pixels. On that
basis, add (at least) about 15 px of padding to input elements and buttons for
mobile, and around 10 px on desktop. Try this out with a real mobile device and
a real finger or thumb. You should comfortably be able to tap each of your
inputs and buttons.

The Tap targets are not sized appropriately
Lighthouse audit can help you automate the process of detecting input elements
that are too small.

Design for thumbs

Search for touch target and
you’ll see lots of pictures of forefingers. However, in the real world, many
people use their thumbs to interact with phones. Thumbs are bigger than
forefingers, and control is less precise. All the more reason for adequately
sized touch targets.

Make text big enough

As with size and padding, the default browser font size for input elements and
buttons is too small, particularly on mobile.

Browsers on different platforms size fonts differently, so it’s difficult to
specify a particular font size that works well everywhere. A quick survey of
popular websites shows sizes of 13–16 pixels on desktop: matching that physical size
is a good minimum for text on mobile.

This means you need to use a larger pixel size on mobile: 16px on Chrome for
desktop is quite legible, but even with good vision it’s difficult to read 16px
text on Chrome for Android. You can set different font pixel sizes for different
viewport sizes using media
queries.
20px is about right on mobile—but you should test this out with friends or
colleagues who have low vision.

The Document doesn’t use legible font sizes
Lighthouse audit can help you automate the process of detecting text that’s too
small.

Provide enough space between inputs

Add enough margin to make inputs work well as touch targets. In other words, aim
for about a finger width of margin.

Make sure your inputs are clearly visible

The default border styling for inputs makes them hard to see. They’re almost
invisible on some platforms such as Chrome for Android.

As well as padding, add a border: on a white background, a good general rule is
to use #ccc or darker.

Use built-in browser features to warn of invalid input values

Browsers have built-in features to do basic form validation for inputs with a
type attribute. Browsers warn when you submit a form with an invalid value,
and set focus on the problematic input.

You can use the :invalid CSS selector to highlight invalid data. Use
:not(:placeholder-shown) to avoid selecting inputs with no content.

input[type=email]:not(:placeholder-shown):invalid {
color: red;
outline-color: red;
}

Try out different ways of highlighting inputs with invalid values.

Use JavaScript where necessary

Toggle password display

You should add a Show password icon or button to enable users to check the
text they’ve entered. Usability
suffers when users
can’t see the text they’ve entered. Currently there’s no built-in way to do
this, though there are plans for
implementation. You’ll
need to use JavaScript instead.

The following code uses a text button to add Show password functionality.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Here’s the CSS to make the button look like plain text:

button#toggle-password {
background: none;
border: none;
cursor: pointer;
font-size: var(--mobile-font-size);
font-weight: 300;
padding: 0;
position: absolute;
top: 0;
right: 0;
}

And the JavaScript for showing the password:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');
togglePasswordButton.addEventListener('click', togglePassword);
function togglePassword() {
if (passwordInput.type === 'password') {
passwordInput.type = 'text';
togglePasswordButton.textContent = 'Hide password';
togglePasswordButton.setAttribute('aria-label',
'Hide password.');
} else {
passwordInput.type = 'password';
togglePasswordButton.textContent = 'Show password';
togglePasswordButton.setAttribute('aria-label',
'Show password as plain text. ' +
'Warning: this will display your password on the screen.');
}
}

Here’s the end result:

Make password inputs accessible

Use aria-describedby to outline password rules by giving it the ID of the
element that describes the constraints. Screenreaders provide the label text, the
input type (password), and then the description.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

When you add Show password functionality, make sure to include
an aria-label to warn that the password will be displayed. Otherwise users may
inadvertently reveal passwords.

<button id="toggle-password"
aria-label="Show password as plain text.
Warning: this will display your password on the screen.">
  Show password
</button>

You can see both ARIA features in action in the following Glitch:

Creating Accessible Forms has more tips to help make forms accessible.

Validate in realtime and before submission

HTML form elements and attributes have built-in features for basic validation,
but you should also use JavaScript to do more robust validation while users are
entering data and when they attempt to submit the form.

Step 5 of the sign-in form
codelab uses the Constraint Validation
API (which is
widely supported) to add
custom validation using built-in browser UI to set focus and display prompts.

Find out more: Use JavaScript for more complex real-time
validation.

Analytics and RUM

«What you cannot measure, you cannot improve» is particularly true for sign-up
and sign-in forms. You need to set goals, measure success, improve your site—and
repeat.

Discount usability
testing can be
helpful for trying out changes, but you’ll need real-world data to really
understand how your users experience your sign-up and sign-in forms:

• Page analytics: sign-up and sign-in page views, bounce rates,
  and exits.
• Interaction analytics: goal
  funnels (where do
  users abandon your sign-in or sign-in flow?) and
  events
  (what actions do users take when interacting with your forms?)
• Website performance: user-centric
  metrics (are your sign-up and sign-in
  forms slow for some reason and, if so, what is the cause?).

You may also want to consider implementing A/B testing in order to try out
different approaches to sign-up and sign-in, and staged rollouts to validate the
changes on a subset of users before releasing changes to all users.

General guidelines

Well designed UI and UX can reduce sign-in form abandonment:

• Don’t make users hunt for sign-in! Put a enlace to the sign-in form at the top
  of the page, using well-understood wording such as Sign In, Create Account
  or Register.
• Keep it focused! Sign-up forms are not the place to distract people with
  offers and other site features.
• Minimize sign-up complexity. Collect other user data (such as addresses or
  credit card details) only when users see a clear benefit from providing that
  data.
• Before users start on your sign-up form, make it clear what the value
  proposition is. How do they benefit from signing in? Give users concrete
  incentives to complete sign-up.
• If possible allow users to identify themselves with a mobile phone number
  instead of an correo electrónico address, since some users may not use correo electrónico.
• Make it easy for users to reset their password, and make the Forgot your
  password? enlace obvious.
• Enlace to your terms of service and privacy policy documents: make it clear to
  users from the start how you safeguard their data.
• Include the logo and name of your company or organization on your signup and
  sign-in pages, and make sure that language, fonts and styles match the rest of
  your site. Some forms don’t feel like they belong to the same site as other
  content, especially if they have a significantly different URLEl URL (Localizador Uniforme de Recursos), es una dirección definida que apunta a la posición de un archivo en un servidor y lo recupera. Las URL se introducen en un navegador web para ingresar a documentos en la web o se incrustan como hipervínculos dentro de un documento. Se puede usar un Permalink para que una URL esté disponible de forma permanente. Componentes de una URL • prefijo de protocolo más.

Keep learning

Photo by Meghan Schiereck on Unsplash.