Formularios de dirección

Completar una dirección puede llevar mucho tiempo y ser frustrante. ¿Qué es una línea de dirección 2? Es posible que no tengas un apellido. ¿Qué debes ingresar en el campo Apellido? Evita estas confusiones y ayuda a los usuarios a completar los formularios de dirección.

Asegúrate de que tu formulario de dirección sea fácil de usar

Muchos formularios usan un solo campo para el nombre y otro para el apellido. Sin embargo, algunas personas no tienen apellido o sus nombres no tienen dos partes, entonces, ¿cómo deben completar el campo de apellido? Usa un solo <input> para el campo de nombre. Obtén más información para manejar diferentes formatos de nombre.

Usa también un único <input> para la dirección; no todas las direcciones tienen un número de calle.

Ten cuidado con las descripciones de los controles de formularios. Por ejemplo, los usuarios en EE.UU. dicen ZIP, y en el Reino Unido código postal. Usa <label for="zip">ZIP or postal code (optional)</label> para asegurarte de que los usuarios sepan qué datos ingresar. Haz que el campo de código postal sea opcional; no todas las direcciones tienen un código postal.

Ayuda a los usuarios a ingresar su dirección

El atributo autocomplete puede ayudar a los usuarios a volver a ingresar su dirección:

  • autocomplete="name"
  • autocomplete="street-address"
  • autocomplete="postal-code"
  • autocomplete="country"

Puedes definir varios valores separados por un espacio para autocomplete. Supongamos que tienes un formulario con una dirección de envío y otro para una dirección de facturación. Para indicarle al navegador cuál es el código postal de la dirección de facturación, puedes usar autocomplete="billing postal-code". Para la dirección de envío, usa shipping como primer valor.

Cambia la etiqueta de la tecla Enter en los teclados en pantalla con el atributo enterkeyhint. Usa enterkeyhint="done" para el último control de formulario y enterkeyhint="next" para los demás controles de formulario.

Recursos