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

Sam Dutton

¿Cómo puedes diseñar un formulario que funcione bien para una variedad de nombres y formatos de direcciones? Los errores menores en los formularios irritan a los usuarios y pueden hacer que abandonen tu sitio o que renuncien a completar una compra o un registro.

En este codelab, se muestra cómo 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í solos. Luego, comenzarás a agregar entradas. (ya se incluyen CSS y un poco de JavaScript).

  • Haz clic en Remix to Edit para que el proyecto sea editable.

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

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

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

Asociaste label con input haciendo coincidir el atributo for de label con name o id de input. Si presionas o haces clic en una etiqueta, el enfoque se mueve a su entrada, lo que crea un objetivo mucho más grande que la entrada por sí sola, lo que es bueno para los dedos, los pulgares y los clics del mouse. Los lectores de pantalla anuncian el texto de la etiqueta cuando la etiqueta o la entrada de la etiqueta se enfocan.

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

Paso 2: Agrega atributos para ayudar a los usuarios a ingresar datos

¿Qué sucede cuando presionas o haces clic en la entrada Nombre en Chrome? Deberías ver las sugerencias de autocompletado que el navegador almacenó y las conjeturas son adecuadas para esta entrada, dados sus 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 valores específicos que se usaban anteriormente en entradas de formularios que también tenían autocomplete="name". El navegador no solo adivina lo que podría ser apropiado: tú tienes el control. También verás la opción Administrar… para ver y editar los nombres y las direcciones que almacena 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 autocompletado. Uno muestra valores de sugerencias heurísticas de la IU del navegador; el otro muestra la IU cuando hay valores de autocompletado almacenados.
IU para Autocompletar con valores adivinados en comparación con Autocompletar.

Ahora, agrega los 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á ninguna entrada de más de 100 caracteres.

  • pattern="[\p{L} \-\.]+" usa una expresión regular que permite caracteres de letras Unicode, puntos y guiones. Esto significa que nombres como Françoise o Jörg no se clasifican como "no válidos". No es el caso si usas el valor \w, que solo permite caracteres del alfabeto latino.

  • required significa que es obligatorio. El navegador no permitirá que se envíe el formulario sin datos para este campo y advertirá y destacará la entrada si intentas enviarlo. No se requiere código adicional.

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

  • Intenta ingresar valores que no se ajusten al atributo pattern.
  • Intenta enviar el formulario con una entrada vacía. Verás la funcionalidad integrada del navegador que advierte sobre el campo obligatorio vacío y lo enfoca.

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

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

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

Un textarea es la forma más flexible para que los usuarios ingresen su dirección y es ideal para cortar y pegar.

Evita dividir el formulario de dirección en componentes, como el nombre y el número de la calle, a menos que sea realmente necesario. No obligues a los usuarios a intentar que su dirección se ajuste a campos que no tienen sentido.

Ahora, agrega campos para código postal y país o región. Para simplificar, solo se incluyen los primeros cinco países. Se incluye una lista completa en el formulario de dirección completo.

<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 el campo Código postal es opcional, ya que muchos países no usan códigos postales. (El Global Sourcebook proporciona información sobre los formatos de direcciones de 194 países diferentes, incluidas direcciones de muestra). La etiqueta País o región se usa en lugar de País, ya que algunas opciones de la lista completa (como Reino Unido) no son países individuales (a pesar del valor autocomplete).

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

Compilaste un formulario de dirección muy funcional, pero ¿qué sucede si tu sitio requiere más de una dirección, por ejemplo, para el envío y la facturación? Intenta actualizar el formulario para permitir que los clientes ingresen direcciones de envío y facturación. ¿Cómo puedes hacer que la entrada de datos sea lo más rápida y sencilla posible, sobre todo si las dos direcciones son iguales? En el artículo que acompaña a este codelab, se explican las técnicas para controlar varias direcciones. Hagas lo que hagas, asegúrate de usar los valores 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>

En el caso de los números de teléfono, usa una sola entrada: no dividas el número en partes. Esto facilita a los usuarios ingresar datos o copiar y pegar, simplifica la validación y permite que los navegadores completen automáticamente los datos.

Hay dos atributos que pueden mejorar la experiencia del usuario cuando ingresa un número de teléfono:

  • type="tel" garantiza que los usuarios de dispositivos móviles obtengan el teclado correcto.
  • enterkeyhint="done" establece la etiqueta de la tecla Intro del teclado para dispositivos móviles para mostrar que este es el último campo y que ahora se puede 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 establecer la etiqueta del botón Intro: 'next' y 'done'.

Tu formulario de dirección completo debería verse así:

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

Existen varias formas de probar tu formulario en diferentes dispositivos:

Más información

  • Analytics y supervisión de usuarios reales: Permite que se pruebe y supervise el rendimiento y la usabilidad del diseño de tu formulario para usuarios reales, y que se verifique si los cambios se implementan correctamente. Debes supervisar el rendimiento de carga y otros indicadores web, así como las estadísticas de la página (¿qué proporción de usuarios abandona tu formulario de dirección sin completarlo? ¿Cuánto tiempo pasan los usuarios en las páginas de tu formulario de dirección?), y las estadísticas de interacción (¿con qué componentes de la página interactúan los usuarios o no?).

  • ¿Dónde se encuentran tus usuarios? ¿Cómo se da formato a la dirección? ¿Qué nombres usan para los componentes de la dirección, como el código postal? En la Frank's Compulsive Guide to Postal Addresses, se proporcionan vínculos útiles y una amplia guía que detalla los formatos de direcciones en más de 200 países.

  • Los selectores de países son conocidos por su mala usabilidad. Es mejor evitar los elementos de selección para una lista larga de elementos, y el estándar de códigos de país ISO 3166 actualmente incluye 249 países. En lugar de un <select>, te recomendamos que consideres una alternativa, como el selector de países del Instituto Baymard.

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

    En la entrada de blog <input type="country" />, se analiza la complejidad de estandarizar un selector de país. La localización de los nombres de países también puede ser problemática. Countries Lists tiene una herramienta para descargar códigos y nombres de países en varios idiomas y formatos.