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 código HTML significativo

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

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

Observa el código HTML de tu formulario en index.html. Verás que hay entradas para el nombre y el correo electrónico y la contraseña. Cada una está en una sección y cada una 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. Esto muestra cómo se ve un formulario sin CSS aparte del estilos de navegador predeterminados.

  • ¿Los diseños predeterminados lucen bien? ¿Qué cambiarías para que el formulario se vea mejor?
  • ¿Los diseños predeterminados funcionan correctamente? ¿Con qué problemas se puede encontrar tu formulario tal como está? Qué en dispositivos móviles? ¿Qué ocurre 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 el formulario

Se podría adquirir mucho hardware y configurar device lab, pero hay Maneras más económicas y sencillas de probar el formulario en diversos 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 el Modo de dispositivo 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 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 de usuarios en dispositivos móviles y computadoras de escritorio.

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

Copia y pega todos los siguientes CSS en el archivo css/main.css:

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

  • ¿Este CSS funciona para 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. Consultas de medios se usan para aplicar reglas de CSS para viewports que tengan al menos 400px de ancho, y luego para ventanas gráficas que tengan al menos 500px de ancho. ¿Son estas interrupciones adecuados? ¿Cómo debes elegir los puntos de interrupción para los formularios?

Paso 3: Agrega atributos que ayuden 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. valores de los campos de formulario y advertir 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 type hacen mucho: * type="password" oculta el texto a medida que se ingresa y habilita la función administrador de contraseñas para sugerir una contraseña segura. * type="email": Proporciona una validación básica y garantiza que los usuarios de dispositivos móviles tengan un teclado adecuado. Probar ¡Manos a la obra!

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

Intenta enviar el formulario con un campo vacío. El navegador no envía el formulario y le solicita a completar los datos faltantes y establecer el enfoque. Eso se debe a que agregaste el atributo require a todos los de datos. Ahora intenta enviarlo con una contraseña de menos de ocho caracteres. El navegador advierte que La contraseña no es lo suficientemente larga y se enfoca en la entrada de contraseña debido al 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 name de autocomplete en la entrada Nombre completo tiene sentido, pero ¿qué ocurre con otras entradas? * Si se utiliza autocomplete="username" en la entrada Email, el administrador de contraseñas del navegador almacenará la dirección de correo electrónico como el nombre para que este usuario (el nombre de usuario) vaya con la contraseña. * El valor autocomplete="new-password" para Password indica al administrador de contraseñas que debería ofrece almacenar este valor como la contraseña del sitio actual. Luego, puedes usar autocomplete="current-password" para habilitar Autocompletar en un formulario de acceso (recuerda que esta registro).

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

Con el formulario tal como está, ¿notaste que hay algún problema con el ingreso 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 comprobar si es correcta.

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>

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. (El funcionalidad de 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 Lectores de pantalla leer 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 las 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 se implementó en el paso 2. Para ver cómo funciona el botón el estilo y la posición).

  • ¿Un ícono funcionaría mejor que enviar un mensaje de texto a ¿Quieres activar o desactivar la visualización de la contraseña? Prueba las pruebas de usabilidad de 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 de ChromeVox y navega por el formulario. ¿Puedes completar el formulario solo con ChromeVox? Si no lo hiciste, ¿qué cambiarías?

Así es como debería verse tu formulario en este punto:

Un paso más allá

En este codelab, no se abarcan 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 en tus propios servidores. ¡Pruébalo! Agregar contraseña verificando tu formulario.

  • Vínculo a los documentos de las Condiciones del Servicio y la política de privacidad (aclara a los usuarios cómo para proteger sus datos.

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

  • Análisis y supervisión de usuarios reales: permiten probar y supervisar el rendimiento y la usabilidad del diseño de su formulario para usuarios reales.