Codelab de prácticas recomendadas para el formulario de dirección

Sam Dutton

¿Cómo puedes diseñar un formulario que funcione bien con una variedad de formatos de nombre y dirección? Forma secundaria Los errores irritan a los usuarios y pueden hacer que abandonen el sitio o dejen de realizar una compra. o registrarse.

En este codelab, aprenderás a compilar un formulario accesible y fácil de usar que funcione bien para la mayoría de los usuarios.

Paso 1: Aprovecha al máximo los elementos y atributos HTML

Comenzarás esta parte del codelab con un formulario vacío, solo un encabezado y un botón por sí mismos. Luego, comenzarás a agregar entradas. (CSS y un poco de JavaScript ya están included.)

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

  • Agrega un campo de nombre al elemento <form> con el siguiente código:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

Eso puede parecer complicado y repetitivo para solo un campo de nombre, pero ya hace mucho.

Asociaste el label con el input haciendo coincidir el atributo for de label con el name o id de input. Cuando el usuario presiona o hace clic en una etiqueta, se enfoca la entrada, lo que hace que objetivo que la entrada por sí sola, lo que es bueno para los dedos, los pulgares y los clics del mouse. Lectores de pantalla anunciar el texto de la etiqueta cuando esta o su entrada se enfoque.

¿Qué sucede con name="name"? Este es el nombre (que es el “nombre”) asociado con los datos de esta entrada, que se envía al servidor cuando se envía el formulario. Incluye un atributo name también significa que se puede acceder a los datos de este elemento con la API de FormData.

Paso 2: Agrega atributos que ayuden a los usuarios a ingresar datos

¿Qué sucede cuando presionas o haces clic en la entrada Nombre en Chrome? Deberías ver la opción Autocompletar sugerencias que el navegador almacenó y que cree que son apropiadas para esta entrada, según su Valores name y id.

Ahora agrega autocomplete="name" a tu código de entrada para que se vea de la siguiente manera:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Vuelve a cargar la página en Chrome y presiona o haz clic en la entrada Nombre. ¿Qué diferencias ves?

Deberías notar un cambio sutil: con autocomplete="name", las sugerencias ahora son específicas valores que se usaron anteriormente en entradas de formulario que también tenían autocomplete="name". El navegador no es solo adivinar qué podría ser apropiado: usted tiene el control. También verás el botón Administrar... opción para ver y editar los nombres y las direcciones almacenados por tu navegador.

Dos capturas de pantalla de Chrome en un teléfono Android que muestran un formulario con una sola entrada, con y sin un valor de autocompletar. Uno muestra valores de sugerencias heurísticas de la IU del navegador. el otro muestra la IU cuando hay valores de autocompletar almacenados.
IU del autocompletado con valores adivinados, en comparación con el autocompletado.

Ahora, agrega atributos de validación de restricciones maxlength, pattern y required para que el código de entrada se vea de la siguiente manera:

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name"
    maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>

  • maxlength="100" significa que el navegador no permitirá entradas que superen los 100 caracteres.

  • pattern="[\p{L} \-\.]+" usa una expresión regular que permite caracteres de letras Unicode. guiones y puntos (puntos completos), Eso significa que los nombres como Françoise o Jörg no se clasifican como “no válido”. Si utilizas el valor \w, que [solo permite caracteres de la fuente Alfabeto latino.

  • required significa... obligatorio. El navegador no permitirá que el formulario se envíe sin datos de este campo, y advertirá y destacará la entrada si intentas enviarla. Sin código adicional .

Para probar cómo funciona el formulario con y sin estos atributos, ingresa los datos:

  • Ingresa valores que no se ajusten al atributo pattern.
  • Intenta enviar el formulario con una entrada vacía. Verás una advertencia de la función integrada del navegador de el campo obligatorio vacío y configurar el foco en él.

Paso 3: Agrega un campo de dirección flexible al formulario

Para agregar un campo de dirección, agrega el siguiente código al formulario:

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

Un objeto textarea es la forma más flexible que tienen los usuarios de ingresar su dirección, y es ideal para cortar y pegar.

Evita dividir el formulario de dirección en componentes, como el nombre de la calle y el número, a menos que que realmente necesitas. No fuerces a los usuarios a intentar ajustar su dirección en campos que no tengan sentido.

Ahora, agrega campos para Código postal y País o región. Para simplificar, aquí solo se incluyen los cinco primeros países. En el formulario de dirección completo, encontrarás una lista completa.

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

Verás que la opción Código postal es opcional, ya que muchos países no utilizan códigos postales. (Global Sourcebook brinda información sobre en 194 países diferentes, que incluye ejemplos de direcciones). La etiqueta País o región en lugar de País, debido a que algunas opciones de la lista completa (como Reino Unido) no son países únicos (a pesar del valor autocomplete).

Paso 4: Permite que los clientes ingresen fácilmente las direcciones de envío y facturación

Creaste un formulario de direcciones altamente funcional, pero ¿qué sucede si tu sitio requiere más de una para el envío y la facturación, por ejemplo? Actualiza el formulario para permitir que los clientes ingresen las direcciones de envío y facturación. ¿Cómo puedes hacer que la entrada de datos sea lo más rápida y fácil posible especialmente si las dos direcciones son iguales? En el artículo que se incluye en este codelab, se explica técnicas para manejar varias direcciones. Hagas lo que hagas, asegúrate de usar los valores de autocomplete correctos.

Paso 5: Agrega un campo de número de teléfono

Para agregar una entrada de número de teléfono, agrega el siguiente código al formulario:

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

Para los números de teléfono, usa una sola entrada: no dividas el número en partes. Eso hace que sea más fácil para permite que los usuarios ingresen datos o copien y peguen, facilita la validación y permite que los navegadores autocompleten su uso.

Existen dos atributos que pueden mejorar la experiencia del usuario al ingresar un número de teléfono:

  • type="tel" garantiza que los usuarios de dispositivos móviles usen el teclado correcto.
  • enterkeyhint="done" establece la etiqueta de la tecla Intro del teclado móvil para mostrar que esta es la última. y podrás enviar el formulario (el valor predeterminado es next).
Dos capturas de pantalla de un formulario en Android que muestran cómo el atributo de entrada Enterkeyhint cambia el ícono del botón de la tecla Intro.
Usa el atributo enterkeyhint para configurar la etiqueta del botón Intro: 'siguiente' y "listo".

Ahora, el formulario de dirección completo debería verse de la siguiente manera:

  • Prueba el formulario en diferentes dispositivos. ¿A qué dispositivos y navegadores segmenta tus anuncios? ¿Cómo podría mejorar el formulario?

Existen varias formas de probar el formulario en diferentes dispositivos:

Un paso más allá

  • Análisis y supervisión de usuarios reales: permitir que se pruebe y supervise el rendimiento y la usabilidad del diseño de su formulario para usuarios reales, y verificar si los cambios se realizaron correctamente. Debes supervisar el rendimiento de carga y otras Métricas web, además de análisis de la página (qué proporción de usuarios rebotan de tu formulario de dirección sin completar ? ¿Cuánto tiempo pasan los usuarios en las páginas de tus formularios de dirección?) y las estadísticas de interacción (qué página componentes con los que interactúan los usuarios o no?)

  • ¿Dónde se encuentran ubicados tus usuarios? ¿Qué formato le dan a su dirección? ¿Qué nombres utilizan para la dirección? componentes, como el código postal? Guía compulsiva de Francisco sobre las direcciones postales proporciona vínculos útiles e indicaciones detalladas para los formatos de dirección en más de 200 países.

  • Los selectores de país son conocidos por su poco uso. Lo mejor es evitar seleccionar elementos en una lista larga de elementos. y, en la actualidad, el estándar de código de país ISO 3166 tiene una lista de 249 países. En lugar de una <select>, te recomendamos considerar una alternativa, como la Selector de país del Baymard Institute.

    ¿Puedes diseñar un mejor selector para listas con muchos elementos? ¿Cómo te asegurarías de que tu diseño accesible en una variedad de dispositivos y plataformas? (El elemento <select> no funciona bien para una pero al menos se puede usar en casi todos los navegadores y dispositivos de asistencia).

    La entrada de blog <input type="país" /> lo analiza la complejidad de estandarizar un selector de país. La localización de los nombres de países también puede problemático. Las listas de países tienen una herramienta para descargar códigos y nombres de países en varios idiomas y en distintos formatos.