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:
- Cómo usar el Modo de dispositivo de las Herramientas para desarrolladores de Chrome para simular dispositivos móviles.
- Envía la URL de tu computadora a tu teléfono.
- Usa un servicio como BrowserStack para probar en un rango. de dispositivos y navegadores.
- Prueba el formulario con una herramienta de lector de pantalla, como la extensión de Chrome ChromeVox.
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
yfont-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 menos500px
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.