Crea un formulario de acceso que siga las prácticas recomendadas

Usa las funciones del navegador multiplataforma para crear formularios de acceso que sean seguros, accesibles y fáciles de usar.

Si los usuarios necesitan acceder a tu sitio, es fundamental que el diseño del formulario de acceso sea bueno. Esto es especialmente cierto para las personas que tienen conexiones deficientes, que usan dispositivos móviles, que tienen prisa o que están bajo estrés. Los formularios de acceso mal diseñados tienen porcentajes de rebote altos. Cada rebote podría significar un cliente perdido y un usuario descontento, no solo una oportunidad de acceso perdida.

Cómo implementarlo

A continuación, se describen los lineamientos más importantes para crear formularios de acceso exitosos.

Usa código HTML significativo y válido

Aprovecha al máximo los elementos y atributos creados para crear formularios:

• <form>, <input>, <label> y <button>
• type, autocomplete y inputmode

Estas habilitan la funcionalidad integrada del navegador, mejoran la accesibilidad y agregan significado al lenguaje de marcado.

Usa el elemento <label> para etiquetar los campos de formulario para el ingreso de datos

Para etiquetar un <input>, <select> o <textarea>, usa un <label>. Asocia una etiqueta con una entrada asignándole al atributo for de la etiqueta el mismo valor que el atributo id de la entrada.

Aprovecha al máximo los atributos HTML

Facilita el ingreso de datos para los usuarios con el atributo <type> del elemento <input> adecuado para proporcionar el teclado correcto en dispositivos móviles y habilitar la validación integrada básica del navegador.

Usa siempre type="email" para las direcciones de correo electrónico y type="tel" para los números de teléfono.

Cada elemento <input>, <select> y <textarea> DEBERÍA tener un atributo autocomplete apropiado para mejorar la accesibilidad y ayudar a los usuarios a evitar volver a ingresar datos.

Las entradas de nombre de usuario y correo electrónico contienen identificadores, no prosa. Agrega spellcheck="false" para que el navegador no las reescriba en algo que no coincida con la cuenta. autocorrect y autocapitalize siempre están inhabilitados para input type="email", pero son obligatorios para los nombres de usuario que no son correos electrónicos.

Crea botones útiles

Usa <button> para los botones. También puedes usar <input type="submit">, pero no uses un div ni algún otro elemento aleatorio que actúe como botón. Los elementos de botón proporcionan un comportamiento accesible, una funcionalidad integrada para enviar formularios y se les puede aplicar diseño fácilmente.

Asigna a cada botón de envío de formulario un valor que indique lo que hace. Usa una etiqueta clara y reconocible. Por ejemplo, usa Acceder en lugar de Continuar o Enviar.

Usa una sola entrada de nombre siempre que sea posible

Permite que los usuarios ingresen su nombre en un solo campo, a menos que tengas un buen motivo para almacenar por separado los nombres de pila, los apellidos, los títulos honoríficos o cualquier otra parte del nombre. Usar un solo campo de entrada para el nombre hace que los formularios sean menos complejos, permite cortar y pegar, y simplifica la función Autocompletar.

Permitir nombres internacionales. Para la validación, evita usar expresiones regulares que solo coincidan con caracteres latinos. La opción Solo caracteres latinos excluye a los usuarios con nombres o direcciones que incluyen caracteres que no están en el alfabeto latino. En su lugar, permite la coincidencia de letras Unicode y asegúrate de que tu backend admita Unicode de forma segura como entrada y salida. Los navegadores modernos admiten Unicode en expresiones regulares.

Muestra el progreso del acceso

Para cada paso del acceso, usa encabezados de página y valores de botones descriptivos que dejen en claro lo que se debe hacer ahora y cuál es el siguiente paso.

Usa el atributo enterkeyhint en las entradas de formulario para establecer la etiqueta de la tecla Intro del teclado para dispositivos móviles. Por ejemplo, usa enterkeyhint="previous" y enterkeyhint="next" en un formulario de varias páginas, enterkeyhint="done" para la entrada final del formulario y enterkeyhint="search" para una entrada de búsqueda.

Ayuda a los usuarios a evitar volver a ingresar los datos de acceso

Asegúrate de agregar los valores de autocomplete adecuados en los formularios de acceso.

Esto permite que los navegadores ayuden a los usuarios almacenando de forma segura los detalles de acceso y completando correctamente los datos de los formularios. Sin la función de autocompletar, es más probable que los usuarios mantengan un registro físico de los detalles de acceso o que almacenen los datos de acceso de forma no segura en su dispositivo.

Valida con cuidado

Valida la entrada de datos en tiempo real y antes de enviar el formulario. Usa type="email" para las entradas de correo electrónico; el navegador validará el formato automáticamente. Agrega el atributo required a los campos obligatorios para evitar que se envíen vacíos.

Coloca el acceso en su propio elemento <form>

Usa siempre el elemento <form> cuando los usuarios ingresen datos.

No encierres las entradas en un elemento <div> ni controles el envío de datos de entrada solo con JavaScript. En general, es mejor usar un elemento <form>. Esto hace que tu sitio sea accesible para lectores de pantalla y otros dispositivos de asistencia, habilita una variedad de funciones integradas del navegador, simplifica la creación de un acceso funcional básico para navegadores más antiguos y puede seguir funcionando incluso si JavaScript falla.

No dupliques las entradas

Algunos sitios obligan a los usuarios a ingresar correos electrónicos o contraseñas dos veces. Esto podría reducir los errores para algunos usuarios, pero genera trabajo adicional para todos y aumenta los porcentajes de abandono. Tampoco tiene sentido preguntar dos veces cuando los navegadores autocompletan las direcciones de correo electrónico o sugieren contraseñas seguras. Es mejor permitir que los usuarios confirmen su dirección de correo electrónico (de todos modos, deberás hacerlo) y facilitarles el restablecimiento de la contraseña si es necesario.

Mantén las contraseñas privadas, pero permite que los usuarios las vean si lo desean

Las entradas de contraseña deben tener type="password" para ocultar el texto de la contraseña y ayudar al navegador a comprender que la entrada es para contraseñas. (Ten en cuenta que los navegadores usan una variedad de técnicas para comprender los roles de entrada y decidir si ofrecer o no guardar las contraseñas).

Debes agregar un botón de activación Mostrar contraseña para que los usuarios puedan verificar el texto que ingresaron, y no olvides agregar un vínculo ¿Olvidaste tu contraseña?.

Proporciona el teclado adecuado a los usuarios de dispositivos móviles

Usa <input type="email"> para darles a los usuarios de dispositivos móviles un teclado adecuado y habilitar la validación básica integrada de direcciones de correo electrónico que realiza el navegador, sin necesidad de JavaScript.

Si necesitas usar un número de teléfono en lugar de una dirección de correo electrónico, <input type="tel"> habilita un teclado telefónico en dispositivos móviles. También puedes usar el atributo inputmode cuando sea necesario: inputmode="numeric" es ideal para números de PIN.

Evita que el teclado del dispositivo móvil obstruya el botón de acceso

Si no tienes cuidado, los teclados para dispositivos móviles pueden cubrir el formulario o, lo que es peor, obstruir parcialmente el botón Acceder. Es posible que los usuarios se den por vencidos antes de darse cuenta de lo que sucedió.

Siempre que sea posible, evita esto mostrando solo las entradas de correo electrónico (o teléfono) y contraseña, y el botón Acceder en la parte superior de la página de acceso. Coloca otro contenido debajo.

Ayuda a los usuarios a evitar volver a ingresar datos

Puedes ayudar a los navegadores a almacenar datos correctamente y autocompletar las entradas, de modo que los usuarios no tengan que recordar ingresar los valores de correo electrónico y contraseña. Esto es especialmente importante en dispositivos móviles y crucial para las entradas de correo electrónico, que tienen altos porcentajes de abandono. Esto consta de dos partes:

1. Los atributos autocomplete, name, id y type ayudan a los navegadores a comprender la función de las entradas para almacenar datos que luego se pueden usar para la función Autocompletar. Para permitir que se almacenen datos para la función de autocompletar, los navegadores actualizados también requieren que las entradas tengan un valor name o id estable (que no se genere de forma aleatoria en cada carga de página o implementación del sitio) y que estén en un elemento <form> con un botón submit.
2. El atributo autocomplete ayuda a los navegadores a autocompletar correctamente las entradas con los datos almacenados.

Para las entradas de correo electrónico, usa autocomplete="username", ya que los administradores de contraseñas de los navegadores actualizados reconocen username, aunque deberías usar type="email" y tal vez quieras usar id="email" y name="email". En el caso de las entradas de contraseña, usa el valor autocomplete adecuado para ayudar a los navegadores a diferenciar entre las contraseñas nuevas y las actuales.

Usa autocomplete="current-password" para una contraseña existente

OBLIGATORIO: Usa autocomplete="current-password" para la entrada de contraseña en un formulario de acceso. Esto le indica al navegador que quieres que use la contraseña actual que tiene almacenada para el sitio.

Para un formulario de acceso:

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

Habilita el navegador para que sugiera una contraseña segura

Los navegadores actualizados usan heurística para decidir cuándo mostrar la IU del Administrador de contraseñas y sugerir una contraseña segura.

Los generadores de contraseñas integrados en el navegador permiten que los usuarios y desarrolladores no tengan que determinar qué es una "contraseña segura". Como los navegadores pueden almacenar contraseñas de forma segura y autocompletarlas según sea necesario, los usuarios no necesitan recordar ni ingresar contraseñas. Alentar a los usuarios a aprovechar los generadores de contraseñas integrados en el navegador también significa que es más probable que usen una contraseña única y segura en tu sitio, y que sea menos probable que reutilicen una contraseña que podría verse comprometida en otro lugar.

Ayuda a evitar que los usuarios omitan entradas por accidente

OBLIGATORIO: Agrega el atributo required a los campos de correo electrónico y contraseña. Los navegadores modernos solicitan y enfocan automáticamente los datos que faltan.

<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>

Permitir pegar contraseñas

Algunos sitios no permiten pegar texto en los campos de entrada de contraseñas.

No permitir que se peguen contraseñas molesta a los usuarios, fomenta el uso de contraseñas fáciles de recordar (y, por lo tanto, más fáciles de vulnerar) y, según organizaciones como el Centro Nacional de Seguridad Cibernética del Reino Unido, puede reducir la seguridad. Los usuarios solo se dan cuenta de que no se permite pegar después de que intentan pegar su contraseña, por lo que no permitir pegar contraseñas no evita las vulnerabilidades del portapapeles.

Estrategias de resguardo

La función Autocompletar es una mejora progresiva. En los navegadores que no admiten el autocompletado, los usuarios simplemente deberán ingresar sus credenciales de acceso de forma manual. Las restricciones semánticas de HTML (como type, inputmode y required) seguirán funcionando de forma adecuada para validar la entrada del usuario y proporcionar los teclados virtuales correctos.