Codelab de prácticas recomendadas para el formulario de registro

Sam Dutton

En este codelab, aprenderás a crear 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 los elementos de formulario para aprovechar al máximo las funciones integradas del navegador.

  • Haz clic en Remix para editar para que el proyecto se pueda editar.

Consulta el código 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. De esta manera, se muestra cómo se ve un formulario sin CSS, excepto los estilos predeterminados del navegador.

  • ¿Los estilos predeterminados lucen bien? ¿Qué cambiarías para que el formulario se vea mejor?
  • ¿Los estilos predeterminados funcionan bien? ¿Qué problemas podrías tener si usas tu formulario tal como está? ¿Qué ocurre con los dispositivos móviles? ¿Qué sucede con los lectores de pantalla y otras tecnologías de accesibilidad?
  • ¿Quiénes son tus usuarios y a qué dispositivos y navegadores segmentas tus anuncios?

Prueba el formulario

Podrías adquirir mucho hardware y configurar un lab de dispositivos, pero existen formas más económicas y sencillas de probar tu formulario en una variedad de navegadores, plataformas y dispositivos:

Haz clic en Ver app para obtener una vista previa del formulario de registro.

  • Prueba tu formulario en diferentes dispositivos con el modo de dispositivo de Chrome DevTools.
  • Ahora abre el formulario en un teléfono o en otro dispositivo real. ¿Qué diferencias ves?

Paso 2: Agrega CSS para que el formulario funcione mejor

Haz clic en Ver fuente para volver 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 una variedad 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 CSS en el archivo css/main.css:

Haz clic en Ver aplicación para ver el formulario de registro personalizado. Luego, haz clic en Ver código fuente para volver a css/main.css.

  • ¿Este CSS funciona para una variedad de 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 a viewports que tienen al menos 400px de ancho y, luego, para viewports que tienen al menos 500px de ancho. ¿Estos puntos de inflexió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 autocomplete los valores de los campos de formulario, y advertirás sobre los campos con datos faltantes o no válidos.

Actualiza tu 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 de type hacen mucho: * type="password" oculta el texto a medida que se ingresa y habilita el administrador de contraseñas del navegador para que sugiera 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ébala.

Haz clic en Ver aplicación y, luego, en la etiqueta Correo electrónico. ¿Qué ocurre entonces? 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) tiene el foco. 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 pedirá que completes los datos faltantes y establezcas el enfoque. Esto se debe a que agregaste el atributo require a todas las entradas. Ahora intenta enviar el formulario 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 contraseña debido al atributo minlength="8". Lo mismo ocurre con 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 ningún código adicional.

Tiene sentido usar el valor name de autocomplete para la entrada Nombre completo, pero ¿qué ocurre con las otras 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 que coincida con la contraseña. * autocomplete="new-password" para Contraseña es una sugerencia para el administrador de contraseñas que debe ofrecer almacenar este valor como la contraseña del sitio actual. Luego, puedes usar autocomplete="current-password" para habilitar la función Autocompletar en un formulario de acceso (recuerda que este es un formulario de registro).

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

Con el formulario tal como está, ¿notaste algún error en la entrada de 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 verificar si la ingresaste correctamente.

No hagas que los usuarios tengan que adivinar.

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>

Se agregan 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 la contraseña.
  • Un atributo aria-describedby para la entrada de 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 la contraseña y mostrarles a los usuarios información sobre las restricciones de contraseña, copia todo el código JavaScript que aparece a continuación y pégalo en tu propio archivo js/main.js.

(El CSS ya está implementado desde el paso 2. Echa un vistazo para ver cómo se aplica el estilo y se posiciona el botón de activación de la contraseña.)

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

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

Tu formulario debería verse así en este punto:

Más información

Este codelab no abarca varias funciones importantes:

  • Buscando contraseñas hackeadas Nunca debes permitir contraseñas hackeadas. Puedes (y debes) usar un servicio de verificación de contraseñas para detectar las contraseñas hackeadas. Puedes usar un servicio existente o ejecutar uno por tu cuenta en tus propios servidores. ¡Pruébalo! Agrega la verificación de contraseña a tu formulario.

  • Vínculo a los documentos de las Condiciones del Servicio y la Política de Privacidad: Deja claro a los usuarios cómo resguardas sus datos.

  • Estilo y desarrollo de la marca: Asegúrate de que coincidan con el resto del sitio. Cuando ingresan nombres y direcciones, y realizan pagos, los usuarios deben sentirse cómodos y confiar en que siguen en el lugar correcto.

  • Analytics y supervisión de usuarios reales: Permiten probar y supervisar el rendimiento y la usabilidad del diseño de tu formulario para usuarios reales.