Codelab de prácticas recomendadas para el formulario de registro

Sam Dutton

En este codelab, se muestra cómo compilar un formulario de registro que sea seguro, accesible y fácil de usar.

Paso 1: Usa HTML significativo

En este paso, aprenderás a usar elementos de formulario para aprovechar al máximo las funciones integradas del navegador.

  • Haz clic en Remix to Edit para que el proyecto sea editable.

Echa un vistazo al archivo HTML de tu formulario en index.html. Verás que hay entradas para el nombre, el correo electrónico y la contraseña. Cada uno está en una sección y tiene una etiqueta. El botón Registrarse es... un <button>. Más adelante en este codelab, aprenderás los poderes especiales de todos estos elementos.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Haz clic en Ver aplicación para obtener una vista previa del formulario de registro. Allí puedes ver cómo se ve un formulario sin CSS aparte de los estilos predeterminados del navegador.

  • ¿Los estilos predeterminados se ven bien? ¿Qué cambiarías para que el formulario se vea mejor?
  • ¿Funcionanlos estilos predeterminados? ¿Qué problemas podrías encontrar al utilizar el formulario tal como está? ¿Qué ocurre en los dispositivos móviles? ¿Qué sucede con los lectores de pantalla y otras tecnologías de asistencia?
  • ¿Quiénes son tus usuarios y a qué dispositivos y navegadores te orientas?

Prueba tu formulario

Puedes adquirir mucho hardware y configurar un lab de dispositivo, pero hay formas más económicas y sencillas de probar tu formulario en diferentes navegadores, plataformas y dispositivos:

Haz clic en Ver aplicación para obtener una vista previa del formulario de registro.

  • Prueba el formulario en diferentes dispositivos con Device Mode de las Herramientas para desarrolladores de Chrome.
  • Ahora abre el formulario en un teléfono o en otros dispositivos reales. ¿Qué diferencias ves?

Paso 2: Agrega CSS para que el formulario funcione mejor

Haz clic en Ver fuente para regresar a tu código fuente.

Hasta ahora, no hay nada malo con el código HTML, pero debes asegurarte de que tu formulario funcione bien para un rango de usuarios de dispositivos móviles y de escritorio.

En este paso, agregarás CSS para que el formulario sea más fácil de usar.

Copia y pega todo el siguiente código CSS en el archivo css/main.css:

Haz clic en Ver aplicación para ver tu formulario de registro con estilo. Luego, haz clic en Ver fuente para volver a css/main.css.

  • ¿Este CSS funciona en varios navegadores y tamaños de pantalla?

  • Intenta ajustar padding, margin y font-size para que se adapten a tus dispositivos de prueba.

  • El CSS prioriza los dispositivos móviles. Las consultas de medios se usan para aplicar reglas de CSS en viewports que tienen al menos 400px de ancho y, luego, nuevamente para viewports de al menos 500px de ancho. ¿Estos puntos de interrupción son adecuados? ¿Cómo deberías elegir los puntos de interrupción para los formularios?

Paso 3: Agrega atributos para ayudar a los usuarios a ingresar datos

En este paso, agregarás atributos a tus elementos de entrada para permitir que el navegador almacene y autocompleta los valores de los campos de formulario, y advierte sobre los campos con datos faltantes o no válidos.

Actualiza el archivo index.html para que el código del formulario se vea de la siguiente manera:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

Los valores type son muy útiles: * type="password" oculta el texto a medida que se ingresa y habilita el administrador de contraseñas del navegador para sugerir una contraseña segura. * type="email" proporciona una validación básica y garantiza que los usuarios de dispositivos móviles obtengan un teclado adecuado. ¡Pruébalo!

Haz clic en Ver aplicación y, luego, en la etiqueta Correo electrónico. ¿Qué ocurre? El enfoque se mueve a la entrada de correo electrónico porque la etiqueta tiene un valor for que coincide con el id de la entrada de correo electrónico. Las demás etiquetas y entradas funcionan de la misma manera. Los lectores de pantalla también anuncian el texto de la etiqueta cuando esta (o su entrada asociada) se enfoca. Puedes probarlo con la extensión de ChromeVox.

Intenta enviar el formulario con un campo vacío. El navegador no enviará el formulario y te solicitará que completes los datos que faltan y establece el enfoque. Esto se debe a que agregaste el atributo require a todas las entradas. Ahora intenta enviarlo con una contraseña que tenga menos de ocho caracteres. El navegador advierte que la contraseña no es lo suficientemente larga y establece el enfoque en la entrada de la contraseña debido al atributo minlength="8". Lo mismo funciona para pattern (que se usa para la entrada de nombre) y otras restricciones de validación. El navegador hace todo esto automáticamente, sin necesidad de código adicional.

Usar el valor autocomplete name para la entrada Nombre completo tiene sentido, pero ¿qué pasa con las demás entradas? * autocomplete="username" para la entrada Email significa que el administrador de contraseñas del navegador almacenará la dirección de correo electrónico como el "nombre" de este usuario (el nombre de usuario) para ir con la contraseña. * autocomplete="new-password" para Contraseña es una sugerencia para el administrador de contraseñas que debería ofrecer almacenar este valor como la contraseña del sitio actual. Luego, puedes usar autocomplete="current-password" para habilitar el autocompletado en un formulario de acceso (recuerda que este es un formulario de sign-up).

Paso 4: Ayuda a los usuarios a ingresar contraseñas seguras

Con el formulario tal como está, ¿notaste algo raro en la entrada de la contraseña?

Hay dos problemas: * No hay forma de saber si hay restricciones en el valor de la contraseña. * No puedes ver la contraseña para revisar si la ingresaste correctamente.

No hagas que los usuarios adivinen.

Actualiza la sección de contraseñas de index.html con el siguiente código:

<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="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

Esto agrega nuevas funciones para ayudar a los usuarios a ingresar contraseñas:

  • Un botón (en realidad solo texto) para activar o desactivar la visualización de la contraseña (La funcionalidad del botón se agregará con JavaScript).
  • Un atributo aria-label para el botón de activación de contraseña.
  • Un atributo aria-describedby para la entrada de la contraseña Los lectores de pantalla leen el texto de la etiqueta, el tipo de entrada (contraseña) y, luego, la descripción.

Para habilitar el botón de activación de contraseña y mostrar a los usuarios información sobre las restricciones de contraseñas, copia todo el código JavaScript que aparece a continuación y pégalo en tu propio archivo js/main.js.

(El CSS ya existe desde el paso 2. Echa un vistazo para ver cómo se diseña y posiciona el botón de activación de contraseña).

  • ¿Un ícono funcionaría mejor que un texto para activar o desactivar la visualización de la contraseña? Prueba las pruebas de usabilidad con descuento con un grupo pequeño de amigos o colegas.

  • Para descubrir cómo funcionan los lectores de pantalla con los formularios, instala la extensión de ChromeVox y navega por el formulario. ¿Puedes completar el formulario solo con ChromeVox? Si no, ¿qué cambiarías?

El formulario debería verse de la siguiente manera:

Un paso más allá

En este codelab, no se abarcan varias funciones importantes:

  • Buscando contraseñas hackeadas Nunca debes permitir contraseñas que hayan sido hackeadas. Puedes (y debes) usar un servicio de revisión de contraseñas para detectar contraseñas hackeadas. Puedes usar un servicio existente o ejecutar uno en tus propios servidores. Pruébalo. Agrega la comprobación de contraseñas al formulario.

  • Vínculo a los documentos de las Condiciones del Servicio y la política de privacidad: Deja en claro a los usuarios cómo proteges sus datos.

  • Estilo y desarrollo de la marca: Asegúrese de que combinen con el resto de su sitio. A la hora de ingresar nombres y direcciones y realizar pagos, los usuarios deben sentirse cómodos y tener la confianza de que están en el lugar correcto.

  • Analytics y supervisión de usuarios reales: Permite que los usuarios reales prueben y supervisen el rendimiento y la usabilidad del diseño de tu formulario.