Usar funciones de navegador multiplataforma para crear un formulario de acceso

Sam Dutton

En este codelab, aprenderás a compilar un formulario de acceso que sea seguro, accesible y fácil de usar.

1. Usa HTML significativo

Usa estos elementos creados para el trabajo:

  • <form>
  • <section>
  • <label>
  • <button>

Como verás, estos elementos habilitan las funciones integradas del navegador, mejoran la accesibilidad y agregan significado a tu lenguaje de marcado.

  1. Haz clic en Remezcla para editar el proyecto.

  2. Agrega el siguiente código al elemento <body>:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

    En este punto, tu archivo index.html debería verse de la siguiente manera:

  3. Haz clic en Ver aplicación para obtener una vista previa del formulario de acceso. El HTML que agregaste es válido y correcto, pero el estilo predeterminado del navegador hace que parezca terrible y difícil de usar, especialmente en dispositivos móviles.

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

2. Diseña para dedos y pulgares

Ajusta el padding, los márgenes y los tamaños de la fuente para asegurarte de que tus entradas funcionen bien en dispositivos móviles.

  1. Copia el siguiente CSS y pégalo en tu archivo style.css:

  2. Haz clic en Ver aplicación para ver el formulario de acceso renovado.

  3. Haz clic en Ver código fuente para volver a tu archivo style.css.

Hay mucho código. Lo principal que debes tener en cuenta son los cambios en los tamaños:

  • padding y margin se agregaron a las entradas.
  • font-size es diferente en dispositivos móviles y computadoras de escritorio.

El selector :invalid se usa para indicar cuando una entrada tiene un valor no válido. Todavía no funciona.

El diseño de CSS está orientado a los dispositivos móviles:

  • La CSS predeterminada es para viewports con menos de 450 píxeles de ancho.
  • La sección de consulta de medios establece anulaciones para viewports que tengan, al menos, 450 píxeles de ancho.

Cuando crees tu propio formulario de esta manera, es muy importante en este punto del proceso que pruebes tu código en dispositivos reales, tanto para computadoras de escritorio como para dispositivos móviles:

  • ¿El texto de entrada y la etiqueta son legibles, en especial para las personas con baja visión?
  • ¿Las entradas y el botón Acceder son lo suficientemente grandes como para usarlos como objetivos táctiles para los dedos?

3. Agrega atributos de entrada para habilitar las funciones integradas del navegador

Habilita el navegador para almacenar y autocompletar valores de entrada, y proporciona acceso a las funciones integradas de administración de contraseñas.

  1. Agrega atributos al HTML del formulario para que se vea de la siguiente manera:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

  2. Vuelve a ver tu aplicación y, luego, haz clic en Correo electrónico.

    Observa cómo el enfoque se mueve a la entrada del correo electrónico. Esto se debe a que la etiqueta está asociada con la entrada a través del atributo for="email". Los lectores de pantalla también anuncian el texto de la etiqueta cuando esta o su entrada asociada se enfoca.

  3. Enfocar la entrada del correo electrónico en un dispositivo móvil

    Observa cómo el teclado está optimizado para escribir una dirección de correo electrónico. Por ejemplo, los caracteres @ y . podrían mostrarse en el teclado principal, y el sistema operativo podría mostrar los correos electrónicos almacenados encima del teclado. Todo esto sucede porque el atributo type="email" se aplica a un elemento <input>.

    El teclado de correo electrónico predeterminado en iOS.

  4. Escribe algo de texto en la entrada de contraseña.

    El texto está oculto de forma predeterminada porque se aplicó el atributo type="password" al elemento.

  • Los atributos autocomplete, name, id y type ayudan a los navegadores a comprender la función de las entradas para almacenar datos que se pueden usar más adelante para el autocompletado.
  1. Enfoca la entrada del correo electrónico en un dispositivo de escritorio y escribe algo de texto. Para ver la URL de la app, haz clic en Pantalla completa El ícono de pantalla completa. Si almacenaste direcciones de correo electrónico en el navegador, es probable que veas un diálogo que te permite seleccionar uno. Esto sucede porque el atributo autocomplete="username" se aplicó a la entrada de correo electrónico.
  • autocomplete="username" y autocomplete="current-password" ayudan a los navegadores a usar valores almacenados para autocompletar las entradas.

Los navegadores usan técnicas diferentes para determinar la función de las entradas de formularios y proporcionan autocompletado para una variedad de sitios web diferentes.

Agrega y quita atributos para probar esto por tu cuenta.

Es muy importante probar el comportamiento en todas las plataformas. Debes ingresar valores y enviar el formulario en diferentes navegadores y dispositivos. Puedes realizar pruebas fácilmente en varias plataformas con BrowserStack, que es gratuito para proyectos de código abierto. Pruébalo

En este punto, tu archivo index.html debería verse de la siguiente manera:

4. Agrega una IU para activar o desactivar la visualización de contraseñas

Los expertos en usabilidad recomiendan enfáticamente que agregues un ícono o botón que les permita a los usuarios ver el texto que ingresan en el campo Contraseña. No hay una forma integrada de hacerlo, por lo que debes implementarla por tu cuenta con JavaScript.

El código para agregar esta funcionalidad es sencillo. En este ejemplo, se usa texto, no un ícono.

Actualiza los archivos index.html, style.css y script.js de la siguiente manera.

  1. Agrega un botón de activación a la sección de contraseñas en el archivo index.html:

    <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="current-password" required>
</section>

  2. Agrega el siguiente CSS al final del archivo style.css:

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    Esto hace que el botón Mostrar contraseña parezca texto sin formato y lo muestra en la esquina superior derecha de la sección de contraseñas.

  3. Agrega el siguiente JavaScript al archivo script.js para activar o desactivar la visualización de la contraseña y establecer el aria-label adecuado:

    const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

  4. Prueba ahora la lógica para mostrar contraseñas.

    1. Visualiza tu app.

    2. Escribe algo en el campo de la contraseña.

    3. Haz clic en Mostrar contraseña.

  5. Repite el cuarto paso en varios navegadores en distintos sistemas operativos.

Piensa en el diseño de UX: ¿los usuarios notarán la opción Mostrar contraseña y la entenderán? ¿Hay una mejor manera de ofrecer esta funcionalidad? Este es un buen momento para probar las pruebas de usabilidad con descuento con un pequeño grupo de amigos o colegas.

Para comprender cómo funciona esta función para los lectores de pantalla, instala la extensión clásica de ChromeVox y navega por el formulario. ¿Los valores de aria-label funcionan según lo previsto?

Algunos sitios web, como Gmail, usan íconos, no texto, para activar o desactivar la visualización de la contraseña. Cuando termines este codelab, impleméntalo con imágenes SVG. Material Design ofrece íconos de alta calidad que puedes descargar de forma gratuita.

A continuación, se muestra cómo debería verse tu código en este punto:

5. Agregar validación de formulario

Puedes ayudar a los usuarios a ingresar sus datos correctamente cuando les permites validarlos antes del envío del formulario y mostrarles lo que deben cambiar.

Los elementos y atributos del formulario HTML tienen funciones integradas para la validación básica, pero también debes usar JavaScript para realizar una validación más sólida mientras los usuarios ingresan datos y cuando intentan enviar el formulario.

En este paso, se usa la API de Constraint Validation (que es ampliamente compatible) para agregar una validación personalizada con una IU del navegador integrada que establece el enfoque y muestra mensajes.

Indícales a los usuarios las restricciones de las contraseñas y cualquier otra entrada. No los hagas adivinar.

  1. Actualiza la sección de contraseñas del archivo index.html:

    <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="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

Esto agrega dos funciones nuevas:

  • Información sobre las restricciones de contraseñas
  • 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)

  1. Agrega el siguiente CSS al final del archivo style.css:

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

  2. Agrega el siguiente JavaScript al archivo script.js:

    passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

  3. Pruébalo

    Todos los navegadores recientes tienen funciones integradas para la validación de formularios y la compatibilidad con JavaScript.

    1. Ingresa una dirección de correo electrónico no válida y haz clic en Acceder. El navegador muestra una advertencia que no requiere JavaScript.

    2. Ingresa una dirección de correo electrónico válida, pero luego haz clic en Acceder sin un valor de contraseña. El navegador advierte que omitiste un valor obligatorio y establece el foco en el ingreso de la contraseña.

    3. Ingresa una contraseña no válida y haz clic en Acceder. Ahora verás diferentes mensajes según lo que esté mal.

  4. Prueba diferentes maneras de ayudar a los usuarios a ingresar direcciones de correo electrónico y contraseñas. Los mejores campos del formulario de contraseña ofrecen algunas sugerencias inteligentes.

    A continuación, se muestra cómo debería verse tu código en este punto:

Llega más lejos

No se muestran en este codelab, pero aún necesitas estas cuatro funciones cruciales del formulario de acceso:

  • Agrega el botón ¿Olvidaste la contraseña? que permite que los usuarios restablezcan las contraseñas con facilidad.

  • Vincula los documentos de las condiciones del servicio y la política de privacidad para que los usuarios sepan cómo proteges sus datos.

  • Ten en cuenta el estilo y el desarrollo de la marca, y asegúrate de que estas características adicionales coincidan con el resto de tu sitio web.

  • Agrega Analytics y RUM para probar y supervisar el rendimiento y la usabilidad del diseño de tus formularios.