Codelab de prácticas recomendadas para el formulario de registro

Sam Dutton

Aprende a crear un formulario de registro seguro, accesible y más fácil de usar. El formulario final está disponible en CodePen.

1. Usa código HTML significativo

Aprende a usar elementos de formulario para aprovechar al máximo las funciones integradas del navegador.

  1. Crea un Pen nuevo.

  2. Copia y pega el siguiente código en el editor de HTML.

    <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>

  3. Haz clic en la vista previa en vivo para ver el formulario HTML. Hay entradas para el nombre, el correo electrónico y la contraseña. Este formulario solo usa el CSS predeterminado del navegador.

Cada entrada se encuentra en una sección y tiene una etiqueta. Es importante destacar que el botón de registro es un <button>. Más adelante en este codelab, aprenderás los poderes especiales de todos estos elementos.

Hazte las siguientes preguntas:

  • ¿Los estilos predeterminados se ven bien? ¿Qué cambiarías para que el formulario se vea mejor?
  • ¿Los diseños predeterminados funcionan correctamente? ¿Qué problemas podrían surgir si se usa el formulario tal como está? ¿Qué sucede en dispositivos móviles? ¿Qué sucede con los lectores de pantalla o las demás tecnologías de asistencia?
  • ¿Quiénes son tus usuarios y a qué dispositivos y navegadores orientas tus anuncios?

Prueba tu formulario

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

Abre la vista en vivo de tu CodePen o visita nuestra vista en vivo. Prueba tu 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?

2. Agrega CSS para que el formulario funcione mejor

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 en dispositivos móviles y computadoras de escritorio.

En este paso, agregarás CSS para que el formulario sea más fácil de usar. Copia y pega este CSS en el archivo css/main.css.

Haz clic en la vista previa para ver el formulario de registro con el diseño que aplicaste.

¿Este CSS funciona en 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 se basa en el principio de prioridad para dispositivos móviles. Usa consultas de medios para aplicar reglas CSS a los viewports que tienen al menos 400px de ancho y, luego, para los viewports que tienen al menos 500px de ancho. ¿Son adecuados estos puntos de interrupción? ¿Cómo deberías elegir los puntos de interrupción para los formularios?

3. Agrega atributos para ayudar a los usuarios a ingresar datos

Agrega atributos a tus elementos de entrada para permitir que el navegador almacene y complete automáticamente los valores de los campos del formulario, y advierta sobre los campos con datos faltantes o no válidos.

Actualiza tu código 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 realizan varias tareas:

  • type="password" oculta el texto a medida que se ingresa y permite que el administrador de contraseñas del navegador sugiera una contraseña segura.
  • type="email" proporciona validación básica y garantiza que los usuarios de dispositivos móviles obtengan un teclado adecuado.

En la vista previa, haz clic en la etiqueta Correo electrónico. ¿Qué ocurre entonces? El enfoque se desplaza 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 otras etiquetas y entradas funcionan de la misma manera. Los lectores de pantalla también anuncian el texto de la etiqueta cuando la etiqueta (o la entrada asociada a la etiqueta) recibe el enfoque.

Intenta enviar el formulario con un campo vacío. El navegador no enviará el formulario y solicitará que se completen los datos faltantes y se establezca el enfoque. Esto se debe a que agregamos 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 enfoca la entrada de contraseña debido al atributo minlength="8". Lo mismo ocurre con pattern (que se usa para la entrada del 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é sucede con las otras entradas?

  • autocomplete="username" para la entrada Correo electrónico 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 indica que debe ofrecer almacenar este valor como la contraseña del sitio actual. Luego, puedes usar autocomplete="current-password" para habilitar el autocompletar en un formulario de acceso. Recuerda que este es un formulario de registro.

4. Ayuda a los usuarios a ingresar contraseñas seguras

¿Notaste algo extraño 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 verificar si la escribiste correctamente.

No hagas que los usuarios adivinen. Actualiza la sección de contraseña 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 displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

Se agregaron funciones nuevas 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).
  • Es un atributo aria-label para el botón de alternar la contraseña.
  • 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 alternar contraseña y mostrar a los usuarios información sobre las restricciones de contraseña, copia el código JavaScript y pégalo en el editor de JavaScript.

  • ¿Un ícono funcionaría mejor que el texto para activar o desactivar la visualización de la contraseña? Prueba la prueba de usabilidad con descuento con un grupo pequeño 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. ¿Podrías completar el formulario solo con ChromeVox? Si no es así, ¿qué cambiarías?

Llega más lejos

En este codelab, no se abordan varias funciones importantes:

  • Se verifican las contraseñas hackeadas. Nunca debes permitir contraseñas que se hayan hackeado. Puedes (y debes) usar un servicio de verificación de contraseñas para detectar las contraseñas hackeadas.

  • Incluye vínculos a los documentos de las Condiciones del Servicio y la política de privacidad. Explícales claramente a los usuarios cómo resguardas sus datos.

  • Actualiza el diseño y la marca de tus formularios para asegurarte de que coincidan con el resto de tu sitio. Esto ayuda a los usuarios a sentirse seguros de que están en el lugar correcto cuando ingresan nombres y direcciones, y, en especial, cuando realizan pagos.

  • Agrega análisis y supervisión de usuarios reales. Permite probar y supervisar el rendimiento y la usabilidad del diseño de tu formulario para los usuarios reales.