Valor incorrecto “street-address” para el atributo “autocomplete” en el elemento “input”: El nombre del campo de autocompletado “street-address” no está permitido en este contexto.

La especificación HTML define reglas específicas sobre qué valores de autocomplete se pueden usar en qué elementos de formulario. El token street-address se categoriza como un campo de autocompletado “multilínea” porque las direcciones de calles a menudo abarcan múltiples líneas (por ejemplo, “123 Main St\nApt 4B”). Como los elementos <input> solo aceptan texto de una sola línea, la especificación prohíbe usar street-address con ellos. El elemento <textarea>, por otro lado, naturalmente soporta contenido multilínea, haciéndolo el anfitrión apropiado para este token.

Esto importa por varias razones. Primero, los navegadores usan los valores de autocomplete para ofrecer sugerencias de autocompletado. Cuando el tipo de elemento no coincide con el formato de datos esperado, los navegadores pueden no autocompletar correctamente o pueden ignorar la pista por completo. Segundo, el cumplimiento de estándares asegura comportamiento consistente entre diferentes navegadores y tecnologías de asistencia. Tercero, usar el emparejamiento correcto mejora la experiencia del usuario — los usuarios esperan que su dirección completa aparezca en un campo que realmente pueda mostrarla correctamente.

Tienes dos enfoques para solucionar esto:

1. Usa un <textarea> — Si quieres la dirección completa en un solo campo, cambia de <input> a <textarea>. Esta es la elección más semánticamente correcta cuando esperas datos de dirección multilínea.

2. Usa tokens específicos de línea en elementos <input> — Si el diseño de tu formulario usa campos separados de una sola línea para cada parte de la dirección, usa address-line1, address-line2, y address-line3 en su lugar. Estos tokens están explícitamente permitidos en elementos <input>.

Ejemplos

❌ Inválido: street-address en un <input>

<label for="address">Dirección</label>
<input type="text" id="address" name="address" autocomplete="street-address">

Esto desencadena el error de validación porque street-address requiere un control multilínea.

✅ Solución: usa un <textarea> con street-address

<label for="address">Dirección</label>
<textarea id="address" name="address" autocomplete="street-address"></textarea>

El <textarea> soporta texto multilínea, por lo que street-address es válido aquí.

✅ Solución: usa tokens específicos de línea en elementos <input>

<label for="address1">Línea de Dirección 1</label>
<input type="text" id="address1" name="address1" autocomplete="address-line1">

<label for="address2">Línea de Dirección 2</label>
<input type="text" id="address2" name="address2" autocomplete="address-line2">

Los tokens address-line1, address-line2, y address-line3 son campos de autocompletado de una sola línea y son perfectamente válidos en elementos <input>. Este enfoque es común en formularios que dividen la dirección en campos separados para números de apartamento, nombres de edificio, u otros detalles.

Resumen de emparejamientos permitidos

Elige el enfoque que mejor se adapte a la disposición de tu formulario. Si prefieres un solo campo de dirección, usa <textarea> con street-address. Si prefieres campos estructurados y separados, usa elementos <input> con los tokens address-line apropiados.

Más información:

WHATWG Spec

HTML Spec: autocomplete attribute

→