Valor inválido “street-address” para o atributo “autocomplete” no elemento “input”: O nome do campo de preenchimento automático “street-address” não é permitido neste contexto.

A especificação HTML define regras específicas sobre quais valores autocomplete podem ser usados em quais elementos de formulário. O token street-address está categorizado como um campo de preenchimento automático “multilinha” porque endereços de rua frequentemente ocupam múltiplas linhas (por exemplo, “Rua Principal, 123\nApt 4B”). Uma vez que os elementos <input> apenas aceitam texto de linha única, a especificação proíbe usar street-address com eles. O elemento <textarea>, por outro lado, suporta naturalmente conteúdo multilinha, tornando-o o hospedeiro apropriado para este token.

Isto é importante por várias razões. Primeiro, os navegadores usam valores autocomplete para oferecer sugestões de preenchimento automático. Quando o tipo de elemento não corresponde ao formato de dados esperado, os navegadores podem não preencher corretamente ou podem ignorar completamente a dica. Segundo, a conformidade com os padrões garante comportamento consistente entre diferentes navegadores e tecnologias assistivas. Terceiro, usar o emparelhamento correto melhora a experiência do utilizador — os utilizadores esperam que o seu endereço completo apareça num campo que consegue realmente exibi-lo adequadamente.

Você tem duas abordagens para corrigir isto:

1. Use um <textarea> — Se pretende o endereço completo num único campo, mude de <input> para <textarea>. Esta é a escolha semanticamente mais correta quando espera dados de endereço multilinha.

2. Use tokens específicos de linha em elementos <input> — Se o design do seu formulário usa campos de linha única separados para cada parte do endereço, use address-line1, address-line2, e address-line3 em vez disso. Estes tokens são explicitamente permitidos em elementos <input>.

Exemplos

❌ Inválido: street-address num <input>

<label for="address">Endereço</label>
<input type="text" id="address" name="address" autocomplete="street-address">

Isto desencadeia o erro de validação porque street-address requer um controlo multilinha.

✅ Correção: use um <textarea> com street-address

<label for="address">Endereço</label>
<textarea id="address" name="address" autocomplete="street-address"></textarea>

O <textarea> suporta texto multilinha, por isso street-address é válido aqui.

✅ Correção: use tokens específicos de linha em elementos <input>

<label for="address1">Linha de Endereço 1</label>
<input type="text" id="address1" name="address1" autocomplete="address-line1">

<label for="address2">Linha de Endereço 2</label>
<input type="text" id="address2" name="address2" autocomplete="address-line2">

Os tokens address-line1, address-line2, e address-line3 são campos de preenchimento automático de linha única e são perfeitamente válidos em elementos <input>. Esta abordagem é comum em formulários que dividem o endereço em campos separados para números de apartamento, nomes de edifícios, ou outros detalhes.

Resumo dos emparelhamentos permitidos

Escolha a abordagem que melhor se adequa ao layout do seu formulário. Se preferir um único campo de endereço, use <textarea> com street-address. Se preferir campos estruturados e separados, use elementos <input> com os tokens address-line apropriados.

Saiba mais:

WHATWG Spec

HTML Spec: autocomplete attribute

→