Autocompletar e sugestões: datalist e autocomplete

Melhorar a experiência do usuário em formulários significa tornar o preenchimento mais rápido e fácil. O HTML5 nos oferece duas ferramentas poderosas para isso, sem a necessidade de JavaScript complexo: a tag <datalist> para sugestões de preenchimento e o atributo autocomplete para preenchimento automático de dados do usuário.

A tag <datalist>: sugestões para campos de texto

A tag <datalist> permite que você crie uma lista de opções pré-definidas que o navegador pode sugerir ao usuário enquanto ele digita em um campo <input>. Pense nela como um "autocompletar" que você define.

Como funciona:

1. Crie uma tag <datalist> e dê a ela um id único.
2. Dentro da <datalist>, adicione várias tags <option>, cada uma com um value que será uma sugestão.
3. No campo <input> ao qual você quer associar as sugestões, adicione o atributo list e defina seu valor para o id da <datalist>.

Características principais:

• Sugestões, não restrições: O usuário ainda pode digitar qualquer coisa no campo <input>, mesmo que não esteja na lista. A <datalist> serve apenas para oferecer sugestões.
• Compatibilidade: Funciona com input type="text", search, url, tel, email.
• Acessibilidade: Melhora a usabilidade para todos os usuários, especialmente aqueles com dificuldades de digitação.

Exemplo:

<form>
  <label for="navegador">Qual seu navegador favorito?</label><br>
  <input type="text" id="navegador" name="navegador_favorito" list="lista_navegadores">

  <datalist id="lista_navegadores">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Edge">
    <option value="Safari">
    <option value="Opera">
  </datalist>

  <br><br>

  <label for="cidade">Cidade de origem:</label><br>
  <input type="text" id="cidade" name="cidade_origem" list="lista_cidades">

  <datalist id="lista_cidades">
    <option value="São Paulo">
    <option value="Rio de Janeiro">
    <option value="Belo Horizonte">
    <option value="Porto Alegre">
    <option value="Curitiba">
  </datalist>
</form>

O atributo autocomplete: preenchimento automático do navegador

O atributo autocomplete é usado para indicar ao navegador qual é o tipo de informação que se espera em um campo de formulário. Com base nisso, o navegador pode oferecer sugestões de preenchimento automático usando dados que ele já salvou do usuário (ex: nome, endereço, e-mail, telefone).

Onde usar:

• Pode ser usado na tag <form> para aplicar a todos os campos (ex: autocomplete="off" para desativar o preenchimento automático para o formulário inteiro).
• Pode ser usado em campos <input>, <textarea> e <select> individualmente para um controle mais granular.

Valores comuns de autocomplete:

Existem muitos valores pré-definidos para autocomplete, que ajudam o navegador a entender o contexto do campo. Alguns exemplos:

• name: Nome completo.
• given-name: Primeiro nome.
• family-name: Sobrenome.
• email: Endereço de e-mail.
• tel: Número de telefone.
• organization: Nome da empresa.
• street-address: Endereço da rua.
• postal-code: Código postal.
• country: País.
• cc-name: Nome no cartão de crédito.
• cc-number: Número do cartão de crédito.
• new-password: Para um novo campo de senha (sugere senhas fortes).
• current-password: Para um campo de senha existente (preenche a senha salva).
• off: Desativa o preenchimento automático para aquele campo/formulário.

Exemplo:

<form action="/cadastro" method="post" autocomplete="on">
  <fieldset>
    <legend>Informações Pessoais</legend>

    <label for="nome">Nome Completo:</label><br>
    <input type="text" id="nome" name="nome_completo" autocomplete="name" required><br><br>

    <label for="email">E-mail:</label><br>
    <input type="email" id="email" name="email_contato" autocomplete="email" required><br><br>

    <label for="tel">Telefone:</label><br>
    <input type="tel" id="tel" name="telefone_contato" autocomplete="tel"><br><br>
  </fieldset>

  <fieldset>
    <legend>Endereço</legend>

    <label for="rua">Endereço da Rua:</label><br>
    <input type="text" id="rua" name="endereco_rua" autocomplete="street-address" required><br><br>

    <label for="cidade">Cidade:</label><br>
    <input type="text" id="cidade" name="cidade_residencia" autocomplete="address-level2" required><br><br>

    <label for="cep">CEP:</label><br>
    <input type="text" id="cep" name="cep_residencia" autocomplete="postal-code" required><br><br>
  </fieldset>

  <button type="submit">Cadastrar</button>
</form>

Por que usar autocomplete?

• Usabilidade: Torna o preenchimento de formulários muito mais rápido e conveniente para o usuário, especialmente em dispositivos móveis.
• Acessibilidade: Ajuda usuários com dificuldades de digitação.
• Segurança: Com new-password e current-password, o navegador pode ajudar a gerenciar senhas de forma mais segura.

Resumindo

• <datalist>:
  • Cria uma lista de sugestões pré-definidas para um campo <input>.
  • Conectada ao <input> pelo atributo list (no <input>) e id (na <datalist>).
  • O usuário ainda pode digitar qualquer valor, não é uma restrição.
• autocomplete (atributo):
  • Indica ao navegador o tipo de informação esperada em um campo.
  • Permite que o navegador ofereça preenchimento automático com dados salvos do usuário.
  • Pode ser usado na tag <form> ou em campos individuais.
  • Possui diversos valores pré-definidos para diferentes tipos de dados (nome, e-mail, endereço, senha, etc.).

Ambas as ferramentas são excelentes para melhorar a usabilidade e a experiência do usuário em formulários, tornando-os mais eficientes e amigáveis.