Como acionar o preenchimento automático no Google Chrome?

191

Gostaria de saber se existe algum tipo de marcação especial para ativar o recurso de preenchimento automático do Chrome para um formulário específico. Encontrei apenas perguntas sobre como desativá-lo, mas gostaria de saber se posso adicionar algum tipo de marcação ao código html para informar ao navegador "essa é a entrada do endereço" ou "esse é o CEP" campo "para preenchê-lo corretamente (assumindo que o usuário ativou esse recurso).

html google-chrome autofill Riesling
fonte

Respostas:

182

ATUALIZAÇÃO para 2017: parece que a resposta de Katie tem mais informações atualizadas do que as minhas. Futuros leitores: dê seus votos positivos para a resposta dela .

Essa é uma ótima pergunta e para a qual a documentação é surpreendentemente difícil de encontrar. Na verdade, em muitos casos, você verá que a funcionalidade de preenchimento automático do Chrome "simplesmente funciona". Por exemplo, o seguinte trecho de html produz um formulário que, pelo menos para mim (Chrome v. 18), é preenchido automaticamente depois de clicar no primeiro campo:

<!DOCTYPE html>
<html>
<body>    
<form method="post">
  First name:<input type="text" name="fname" /><br />
  Last name: <input type="text" name="lname" /><br />
  E-mail: <input type="text" name="email" /><br />
  Phone: <input type="text" name="phone" /><br />
  Address: <input type="text" name="address" /><br />
</form>
</body>
</html>

No entanto, essa resposta é insatisfatória, pois deixa a solução no campo da "mágica". Aprofundando, aprendi que o Chrome (e outros navegadores habilitados para preenchimento automático) dependem principalmente de dicas contextuais para determinar o tipo de dados que devem ser preenchidos nos elementos do formulário. Exemplos de dicas contextuais incluem o nameelemento de entrada, o texto ao redor do elemento e qualquer texto de espaço reservado.

Recentemente, no entanto, a equipe do Chrome reconheceu que esta é uma solução insatisfatória e começou a pressionar pela padronização nesse assunto. Uma postagem muito informativa do grupo Google Webmasters discutiu recentemente esse problema, explicando:

Infelizmente, até agora tem sido difícil para os webmasters garantir que o Chrome e outros provedores de preenchimento de formulários possam analisar seu formulário corretamente. Existem alguns padrões; mas colocam encargos onerosos na implementação do site, para que não sejam muito utilizados na prática.

(Os "padrões" a que se referem é uma versão mais recente das especificações mencionadas na resposta de Avalanchis acima.)

O post do Google continua descrevendo a solução proposta (que é recebida por críticas significativas nos comentários do post). Eles propõem o uso de um novo atributo para esse fim:

Basta adicionar um atributo ao elemento de entrada, por exemplo, um campo de endereço de email pode se parecer com:

<input type=”text” name=”field1” x-autocompletetype=”email” />

... onde x-significa "experimental" e será removido se e quando isso se tornar um padrão. Leia a postagem para obter mais detalhes ou, se quiser aprofundar, encontrará uma explicação mais completa da proposta no wiki do whatwg .

ATUALIZAÇÃO: conforme indicado nessas respostas detalhadas , todas as expressões regulares que o Chrome usa para identificar / reconhecer campos comuns podem ser encontradas em . Portanto, para responder à pergunta original, verifique se os nomes dos seus campos html são correspondidos por essas expressões. Alguns exemplos incluem:autofill_regex_constants.cc.utf8

  • primeiro nome: "first.*name|initials|fname|first$"
  • último nome: "last.*name|lname|surname|last$|secondname|family.*name"
  • o email: "e.?mail"
  • Endereço Linha 1): "address.*line|address1|addr1|street"
  • Código postal: "zip|postal|post.*code|pcode|^1z$"
kmote
fonte
3
Além disso, você tem que enviar um <form> complete -tag com "ação" e "método"
Qualle
Embora isso possa ser relevante nos meus testes, apenas os métodos descritos abaixo realmente funcionam.
Micah
Eu estou supondo que as constantes regex de preenchimento automático não são a única coisa que ele usa, mas também está lembrando coisas de entradas nomeadas personalizadas.
MetaGuru
1
Usou o URL nesta resposta e foi quebrado. Isso funciona agora: code.google.com/p/chromium/codesearch#chromium/src/components/…
Nathan
2
URL que @ Nathan fornecido não funciona mais - Aqui está o atual, até que alterá-lo novamente :) cs.chromium.org/chromium/src/components/autofill/core/common/...
HungryBeagle
85

Esta pergunta é bastante antiga, mas tenho uma resposta atualizada !

Aqui está um link para a documentação do WHATWG para ativar o preenchimento automático.

O Google escreveu um guia bastante bom para o desenvolvimento de aplicativos da Web que são amigáveis ​​para dispositivos móveis. Eles têm uma seção sobre como nomear as entradas nos formulários para usar facilmente o preenchimento automático. Apesar de ter sido escrito para dispositivos móveis, isso se aplica a computadores e dispositivos móveis!

Como ativar o preenchimento automático nos formulários HTML

Aqui estão alguns pontos-chave sobre como habilitar o preenchimento automático:

  • Use a <label>para todos os seus <input>campos
  • Adicione um autocompleteatributo às suas <input>tags e preencha-o usando este guia .
  • Nomeie seus namee autocompleteatributos corretamente para todas as <input>tags

  • Exemplo :

    <label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
placeholder="[email protected]" required autocomplete="email">

<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="[email protected]" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel">

Como nomear suas <input>tags

Para ativar o preenchimento automático, nomeie corretamente os atributos namee autocompleteem suas <input>tags. Isso permitirá automaticamente o preenchimento automático em formulários. Certifique-se também de ter um <label>! Esta informação também pode ser encontrada aqui .

Veja como nomear suas entradas:

  • Nome
    • Use qualquer um destes para name:name fname mname lname
    • Use qualquer um destes para autocomplete:
      • name (para nome completo)
      • given-name (para o primeiro nome)
      • additional-name (para nome do meio)
      • family-name (para sobrenome)
    • Exemplo: <input type="text" name="fname" autocomplete="given-name">
  • O email
    • Use qualquer um destes para name:email
    • Use qualquer um destes para autocomplete:email
    • Exemplo: <input type="text" name="email" autocomplete="email">
  • Endereço
    • Use qualquer um destes para name:address city region province state zip zip2 postal country
    • Use qualquer um destes para autocomplete:
      • Para uma entrada de endereço:
        • street-address
      • Para duas entradas de endereço:
        • address-line1
        • address-line2
      • address-level1 (Estado ou Província)
      • address-level2 (cidade)
      • postal-code (Código postal)
      • country
  • telefone
    • Use qualquer um destes para name:phone mobile country-code area-code exchange suffix ext
    • Use qualquer um destes para autocomplete:tel
  • Cartão de crédito
    • Use qualquer um destes para name:ccname cardnumber cvc ccmonth ccyear exp-date card-type
    • Use qualquer um destes para autocomplete:
      • cc-name
      • cc-number
      • cc-csc
      • cc-exp-month
      • cc-exp-year
      • cc-exp
      • cc-type
  • Nomes de usuário
    • Use qualquer um destes para name:username
    • Use qualquer um destes para autocomplete:username
  • Senhas
    • Use qualquer um destes para name:password
    • Use qualquer um destes para autocomplete:
      • current-password (para formulários de login)
      • new-password (para formulários de inscrição e alteração de senha)

Recursos

Katie
fonte
39

No meu teste, a x-autocompletetag não faz nada. Em vez disso, use autocompletetags nas suas tags de entrada e defina seus valores de acordo com as especificações HTML aqui http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms. html # campo de preenchimento automático .

Exemplo:

<input name="fname" autocomplete="given-name" type="text" placeholder="First Name" required>

A tag do formulário pai precisa de preenchimento automático = "on" e método = "POST".

Micah
fonte
2
em quais navegadores essa especificação está implementada? alguma experiência / testes já realizados?
staabm
O W3C especificação estados que autocomplete deve conter apenas on , offou default. Portanto, essa marcação é inválida e estará sujeita a inconsistências. Na verdade, acho que o posicionamento no atributo de preenchimento automático é irrelevante. Eu acho que ele analisa todos os atributos e o preenchimento automático é um daqueles que verifica.
Liam
1
Este é o HTML correto, consulte a especificação WHATWG e a postagem do Google .
AlecRust 12/09
5

Você precisa nomear os elementos adequadamente para que o navegador os preencha automaticamente.

Aqui está a especificação IETF para isso:

http://www.ietf.org/rfc/rfc3106.txt 1

Avalanchis
fonte
4

Eu acabei de brincar com as especificações e consegui um bom exemplo de trabalho - incluindo mais alguns campos.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

  <form autocomplete="on" method="POST">

    <fieldset>
        <legend>Ship the blue gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-blue shipping given-name" type="text"  required>
            </label>
      </p>
        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-blue shipping family-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Address: <input name=ba
                autocomplete="section-blue shipping street-address">
            </label>


      </p>
        <p>
            <label> City: <input name=bc
                autocomplete="section-blue shipping address-level2">
            </label>

      </p>
        <p>
            <label> Postal Code: <input name=bp
                autocomplete="section-blue shipping postal-code">
            </label>
      </p>

    </fieldset>
    <fieldset>
        <legend>Ship the red gift to...</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="section-red shipping given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="section-red shipping family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="section-red shipping street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="section-red shipping address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="section-red shipping postal-code">
            </label>
      </p>

    </fieldset>

        <fieldset>
        <legend>payment address</legend>
        <p>
            <label> Firstname:
<input name="fname" autocomplete="billing given-name" type="text" required>
            </label>
      </p>

        <p>
            <label> Lastname:
<input name="fname" autocomplete="billing family-name" type="text" required>
            </label>
      </p>
        <p>
            <label> Address: <input name=ra
                autocomplete="billing street-address">
            </label>
      </p>


        <p>
            <label> City: <input name=bc
                autocomplete="billing address-level2">
            </label>

      </p>

        <p>
            <label> Postal Code: <input name=rp
                autocomplete="billing postal-code">
            </label>
      </p>

    </fieldset>
    <input type="submit" />
</form>

</body>
</html>

JSBIN

Ele contém 2 áreas de endereço separadas e também diferentes tipos de endereços. Testei também no iOS 8.1.0 e parece que sempre preenche todos os campos de uma só vez, enquanto o Chrome preenche automaticamente o endereço por endereço.

staabm
fonte
1
Não sei por que essa resposta é reduzida. O exemplo acima ainda trabalha para me utilizando os navegadores descritos
staabm
1
O preenchimento automático mostrado nos exemplos acima é daqui: html.spec.whatwg.org/multipage/forms.html#autofill
Bryan Rehbein
2

Parece que teremos mais controle sobre esse recurso de preenchimento automático. Existe uma nova API experimental disponível no Chrome Canary, que pode ser usada para acessar os dados após a solicitação do usuário:

http://www.chromium.org/developers/using-requestautocomplete http://blog.alexmaccaw.com/requestautocomplete

novas informações do google:

http://googlewebmastercentral.blogspot.de/2015/03/helping-users-fill-out-online-forms.html

https://developers.google.com/web/fundamentals/input/form/label-and-name-inputs#use-metadata-to-enable-auto-complete

Riesling
fonte
0

Aqui está a verdadeira resposta:

A única diferença está no próprio rótulo. O "Nom" vem de "Nome" ou "Nome" em português.

Então aqui está o que você precisa:

  • Um invólucro de formulário;
  • UMA <label for="id_of_field">Name</label>
  • A <input id="id_of_field"></input>

Nada mais.

Totty.js
fonte
Também descobri que o rótulo também pode acionar o preenchimento automático de cromos.
emfi 7/09/15
Então, o que você quer dizer é que o nome do rótulo também é usado ao elaborar os campos de preenchimento automático? Esta resposta não é muito clara
Liam
Na verdade, Nom é do francês. Mas eu fiz funcionar sem um Label, um espaço reservado para a entrada com o valor correto também.
AxelH 07/01
0

Aqui está a nova lista de "nomes" do preenchimento automático do Google. Existem todos os nomes suportados em qualquer idioma permitido.

autofill_regex_constants.cc

Alvargon
fonte
0

O Google agora fornece documentação para isso:

Ajude os usuários a efetuarem o checkout mais rápido com o preenchimento automático | Web Desenvolvedores do Google

e

Crie formulários surpreendentes: use metadados para ativar o preenchimento automático | Web Desenvolvedores do Google

henry
fonte
As respostas com apenas links se tornam inúteis se esses links forem desativados, como o primeiro nessa resposta.
bfontaine 18/02
É verdade, mas é por isso que a resposta é um wiki da comunidade: incentivar outras pessoas a contribuir com isso. Também reduzir a votação de um wiki da comunidade não afeta o autor, ele serve apenas para enterrar a própria documentação do Google. Sempre fique à vontade para atualizar uma resposta do wiki da comunidade, especialmente se for algo tão simples quanto atualizar um link!
henry
-3

No meu caso, $('#EmailAddress').attr('autocomplete', 'off');não está funcionando. Mas a seguir funciona no chrome Versão 67 do jQuery.

$('#EmailAddress').attr('autocomplete', 'new-email');
$('#Password').attr('autocomplete', 'new-password');
reza.cse08
fonte