Crea un formulario que facilite al máximo el ingreso de datos de dirección para los usuarios en computadoras de escritorio y dispositivos móviles. Asegúrate de que el formulario aproveche al máximo las funciones integradas del navegador para el autocompletado, la validación y las restricciones de entrada de datos.
Cómo implementarlo
A continuación, se describen los lineamientos más importantes para crear formularios de dirección exitosos.
Usa código HTML significativo y válido
Aprovecha al máximo los elementos y atributos creados para crear formularios:
<form>,<input>,<label>y<button>type,autocompleteyinputmode
Estas habilitan la funcionalidad integrada del navegador, mejoran la accesibilidad y agregan significado al lenguaje de marcado.
Usa el elemento <label> para etiquetar los campos de formulario para el ingreso de datos
Para etiquetar un <input>, <select> o <textarea>, usa un <label>. Asocia una etiqueta con una entrada asignándole al atributo for de la etiqueta el mismo valor que el atributo id de la entrada.
Aprovecha al máximo los atributos HTML
Facilita el ingreso de datos para los usuarios con el atributo <type> del elemento <input> adecuado para proporcionar el teclado correcto en dispositivos móviles y habilitar la validación integrada básica del navegador.
Usa siempre type="email" para las direcciones de correo electrónico y type="tel" para los números de teléfono.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Cada elemento <input>, <select> y <textarea> DEBERÍA tener un atributo autocomplete apropiado para mejorar la accesibilidad y ayudar a los usuarios a evitar volver a ingresar datos.
Crea botones útiles
Usa <button> para los botones. También puedes usar <input type="submit">, pero no uses un div ni algún otro elemento aleatorio que actúe como botón. Los elementos de botón proporcionan un comportamiento accesible, una funcionalidad integrada para enviar formularios y se les puede aplicar diseño fácilmente.
Asigna a cada botón de envío de formulario un valor que indique lo que hace. Para cada paso hacia la confirmación de la compra, usa un llamado a la acción descriptivo que muestre el progreso y haga que el siguiente paso sea obvio. Por ejemplo, etiqueta el botón de envío en tu formulario de dirección de entrega como Proceder al pago en lugar de Continuar o Guardar.
Usa una sola entrada de nombre siempre que sea posible
Permite que los usuarios ingresen su nombre en un solo campo, a menos que tengas un buen motivo para almacenar por separado los nombres de pila, los apellidos, los títulos honoríficos o cualquier otra parte del nombre. Usar un solo campo de entrada para el nombre hace que los formularios sean menos complejos, permite cortar y pegar, y simplifica la función Autocompletar.
Permitir nombres internacionales. Para la validación, evita usar expresiones regulares que solo coincidan con caracteres latinos. La opción Solo caracteres latinos excluye a los usuarios con nombres o direcciones que incluyen caracteres que no están en el alfabeto latino. En su lugar, permite la coincidencia de letras Unicode y asegúrate de que tu backend admita Unicode de forma segura como entrada y salida. Los navegadores modernos admiten Unicode en expresiones regulares.
Permite una variedad de formatos de dirección
Cuando crees un formulario de dirección, ten en cuenta la variedad de formatos de dirección, incluso dentro de un mismo país. No hagas suposiciones sobre las direcciones "normales".
Si es posible, usa un solo elemento <textarea> para la dirección.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Esta es la opción más flexible para una variedad de formatos de direcciones locales e internacionales.
Si tu modelo de datos necesita líneas de dirección separadas, usa un <input> por línea con los tokens address-line1, address-line2 (y, si es necesario, address-line3) autocomplete para que la función de autocompletar siga funcionando. No dividas la dirección en entradas que no tengan estos tokens y haz que solo la primera línea sea obligatoria.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Ayuda a evitar que los usuarios omitan campos de datos por accidente.
Agrega el atributo required a los campos obligatorios.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Estrategias de resguardo
La función Autocompletar es una mejora progresiva. En los navegadores que no admiten la función Autocompletar, los usuarios simplemente deberán ingresar los detalles de su dirección de forma manual. Las restricciones semánticas de HTML (como type, inputmode y required) seguirán funcionando de forma adecuada como validación de formularios estándar.