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).
Respostas:
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
"first.*name|initials|fname|first$""last.*name|lname|surname|last$|secondname|family.*name""e.?mail""address.*line|address1|addr1|street""zip|postal|post.*code|pcode|^1z$"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!
Aqui estão alguns pontos-chave sobre como habilitar o preenchimento automático:
<label>para todos os seus <input>camposautocompleteatributo às suas <input>tags e preencha-o usando este guia .namee autocompleteatributos corretamente para todas as <input>tagsExemplo :
<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="name@example.com" required autocomplete="email">
<!-- note that "emailC" will not be autocompleted -->
<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
placeholder="name@example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
placeholder="+1-555-555-1212" required autocomplete="tel"><input>tagsPara 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:
name:name fname mname lnameautocomplete:
name (para nome completo)given-name (para o primeiro nome)additional-name (para nome do meio)family-name (para sobrenome)<input type="text" name="fname" autocomplete="given-name">name:emailautocomplete:email<input type="text" name="email" autocomplete="email">name:address city region province state zip zip2 postal country autocomplete:
street-addressaddress-line1address-line2address-level1 (Estado ou Província)address-level2 (cidade)postal-code (Código postal)countryname:phone mobile country-code area-code exchange suffix extautocomplete:telname:ccname cardnumber cvc ccmonth ccyear exp-date card-typeautocomplete:
cc-namecc-numbercc-csccc-exp-monthcc-exp-yearcc-expcc-typename:usernameautocomplete:usernamename:passwordautocomplete:
current-password (para formulários de login)new-password (para formulários de inscrição e alteração de senha)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".
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.
Você precisa nomear os elementos adequadamente para que o navegador os preencha automaticamente.
Aqui está a especificação IETF para isso:
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>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.
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
Aqui está a verdadeira resposta:
Isso funciona: http://jsfiddle.net/68LsL1sq/1/ <label for="name">Nom</label>
Isto não: http://jsfiddle.net/68LsL1sq/2/ <label for="name">No</label>
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:
<label for="id_of_field">Name</label><input id="id_of_field"></input>Nada mais.
Aqui está a nova lista de "nomes" do preenchimento automático do Google. Existem todos os nomes suportados em qualquer idioma permitido.
O Google agora fornece documentação para isso:
e
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');