Usa funciones del navegador multiplataforma para crear un formulario de acceso

Sam Dutton

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

1. Usa código HTML significativo

Usa estos elementos creados para el trabajo:

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

Como verás, estos elementos habilitan la funcionalidad integrada del navegador, mejoran la accesibilidad y agregan significado a tu marcado.

  1. Haz clic en Remix to edit para que el proyecto se pueda editar.

  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>

    Así debería verse tu archivo index.html en este punto:

  3. Haz clic en Ver app para obtener una vista previa del formulario de acceso. El código HTML que agregaste es válido y correcto, pero el diseño predeterminado del navegador hace que se vea mal y sea difícil de usar, especialmente en dispositivos móviles.

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

2. Diseño para dedos y pulgares

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

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

  2. Haz clic en Ver app para ver el formulario de acceso con el nuevo diseño.

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

¡Es mucho código! Los principales aspectos que debes tener en cuenta son los cambios en los tamaños:

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

El selector :invalid se usa para indicar cuándo una entrada tiene un valor no válido. Esta función aún no está disponible.

El diseño de CSS es mobile first:

  • El CSS predeterminado es para viewports de menos de 450 píxeles de ancho.
  • La sección de consultas de medios establece anulaciones para los viewport que tienen al menos 450 píxeles de ancho.

Cuando crees tu propio formulario como este, es muy importante en este punto del proceso probar tu código en dispositivos reales en computadoras y dispositivos móviles:

  • ¿El texto de la etiqueta y de entrada es legible, especialmente para las personas con visión reducida?
  • ¿Los campos de entrada y el botón Acceder son lo suficientemente grandes para usarlos como objetivos táctiles con los pulgares?

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

Permite que el navegador almacene y autocomplete valores de entrada, y proporciona acceso a funciones integradas de administración de contraseñas.

  1. Agrega atributos a tu formulario HTML 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 app y, luego, haz clic en Correo electrónico.

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

  3. Enfoca la entrada de correo electrónico en un dispositivo móvil.

    Observa cómo se optimizó el teclado 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 sobre el teclado. Todo esto sucede porque el atributo type="email" se aplica a un elemento <input>.

    Es el teclado de correo electrónico predeterminado en iOS.

  4. Escribe 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 el rol de las entradas para almacenar datos que se pueden usar más adelante para el autocompletado.
  1. Enfoca la entrada de correo electrónico en un dispositivo de escritorio y escribe texto. Puedes ver la URL de tu app cuando haces clic en Pantalla completa El ícono de pantalla completa. Si almacenaste alguna dirección de correo electrónico en tu navegador, es probable que veas un diálogo que te permita seleccionar entre esos correos electrónicos almacenados. Esto sucede porque el atributo autocomplete="username" se aplica 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 diferentes navegadores utilizan diferentes técnicas para determinar el rol de las entradas de formularios y proporcionar la función de autocompletar para una variedad de sitios web.

Agrega y quita atributos para probarlo 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. Es fácil realizar pruebas en una variedad de plataformas con BrowserStack, que es gratuito para proyectos de código abierto. Pruébalo

Así debería verse tu archivo index.html en este punto:

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

Los expertos en usabilidad recomiendan enfáticamente agregar un ícono o botón que 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 implementarlo tú mismo 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ña 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 código 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 código JavaScript al archivo script.js para alternar 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. Ahora prueba la lógica para mostrar la contraseña.

    1. Visualiza tu app.

    2. Ingresa texto en el campo de contraseña.

    3. Haz clic en Mostrar contraseña.

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

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

Para comprender cómo funciona esta función en los lectores de pantalla, instala la extensión ChromeVox Classic 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, implementa esto con imágenes SVG. Material Design ofrece íconos de alta calidad que puedes descargar de forma gratuita.

Así debería verse tu código en este punto:

5. Agrega validación de formularios

Puedes ayudar a los usuarios a ingresar sus datos correctamente si les permites validarlos antes de enviar el formulario y les muestras lo que deben cambiar.

Los elementos y atributos de formularios 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 validación personalizada con la IU integrada del navegador que establece el enfoque y muestra mensajes.

Indica a los usuarios las restricciones para las contraseñas y cualquier otra entrada. No los hagas adivinar.

  1. Actualiza la sección de contraseña 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>

Se agregan 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 código CSS al final del archivo style.css:

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

  2. Agrega el siguiente código 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 admiten la validación con JavaScript.

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

    2. Ingresa una dirección de correo electrónico válida, pero haz clic en Acceder sin un valor de contraseña. El navegador te advierte que falta un valor obligatorio y enfoca la entrada de contraseña.

    3. Ingresa una contraseña no válida y haz clic en Acceder. Ahora verás diferentes mensajes según el problema.

  4. Prueba diferentes formas de ayudar a los usuarios a ingresar direcciones de correo electrónico y contraseñas. Better password form fields ofrece algunas sugerencias inteligentes.

    Así 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 ¿Olvidaste la contraseña?, un botón que facilita a los usuarios restablecer sus contraseñas.

  • Incluye vínculos a 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 la marca, y asegúrate de que estas funciones adicionales coincidan con el resto de tu sitio web.

  • Agrega Analytics y RUM para que puedas probar y supervisar el rendimiento y la usabilidad del diseño de tu formulario.