Existe uma maneira válida do W3C de desativar o preenchimento automático em um formulário HTML?

424

Ao usar o xhtml1-transitional.dtddoctype, coletando um número de cartão de crédito com o seguinte HTML

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

sinalizará um aviso no validador do W3C:

não há atributo "preenchimento automático".

Existe uma maneira W3C / standards de desativar o preenchimento automático do navegador em campos confidenciais de um formulário?

html standards forms w3c matt b
fonte
10
Tem certeza de que mexer com a configuração de preenchimento automático do usuário é o que você deseja fazer? Se eles estiverem ligados, provavelmente gostarão. Autocomplete é uma característica completamente do lado do navegador, bem como o botão que permite ao usuário alterar o tamanho da fonte, etc. Você não deve interferir com os seus desejos
rmeador
113
Mesmo para algo tão sensível quanto o número do cartão de crédito? Não consigo pensar em muitas pessoas que gostariam que isso fosse lembrado - especialmente porque o preenchimento automático está ativado por padrão na maioria dos navegadores. Se eles querem que isso seja lembrado tão ruim, podem usar algo que preenche formulários como a barra de ferramentas do Google.
mate b
13
Meu caso de uso é um pouco diferente - estou lançando meu próprio preenchimento automático e não quero que ele colidir com o navegador. Eu apenas descobri que autocomplete = "off" é inválido, mas parece que não há outra solução simples (injetá-lo com js é bobagem)
thepeer
13
@rmeador porque, às vezes, queremos oferecer uma alternativa mais amigável à caixa de sugestão automática padrão. @corydoras, por favor, não exagere no seu peso OSX, não é útil para a resolução desta pergunta.
21711 Josh M.
12
O problema é que os bancos responsabilizarão o comerciante se uma transação fraudulenta ocorrer ... mesmo que a culpa seja do cliente em 100%. Portanto, em algumas circunstâncias, é legítimo desativar o recurso para o cliente.
Alexandre H. Tremblay

Respostas:

421

Aqui está um bom artigo do MDC, que explica os problemas (e soluções) para formar o preenchimento automático. A Microsoft publicou algo semelhante aqui também.

Para ser honesto, se isso é algo importante para seus usuários, 'quebrar' os padrões dessa maneira parece apropriado. Por exemplo, a Amazon usa um pouco o atributo 'preenchimento automático' e parece funcionar bem.

Se você deseja remover completamente o aviso, use o JavaScript para aplicar o atributo aos navegadores que o suportam (IE e Firefox são os navegadores importantes) usando someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Por fim, se seu site estiver usando HTTPS, o IE desativará automaticamente o preenchimento automático (como outros navegadores, até onde eu saiba).

Atualizar

Como essa resposta ainda recebe alguns votos positivos, eu só queria salientar que no HTML5, você pode usar o atributo 'preenchimento automático' no elemento do formulário. Veja a documentação no W3C para isso.

Nick Presta
fonte
41
Parece que o Firefox não desativa o preenchimento automático em https, mas é um conhecimento útil. Obrigado!
mate b
3
O Safari não respeita o atributo autocomplete = "off". Veja stackoverflow.com/questions/22817801/…
Skurpi
1
autocompletepode ser usado não apenas no formelemento , e offobras de valor pelo menos emchromium-40.0.2214.115
x-yuri
O W3C parece estar expandindo as normas para o preenchimento automático em HTML5.1 (em projecto como deste comentário) w3c.github.io/html/...
Justin Nafe
1
Se nada funcionar, use a área de texto em vez da caixa de texto para desativar o preenchimento automático.
Bsienn
64

Eu ficaria muito surpreso se o W3C tivesse proposto uma maneira de trabalhar com o (X) HTML4. O recurso de preenchimento automático é totalmente baseado em navegador e foi introduzido nos últimos anos (muito depois da criação do padrão HTML4).

Não ficaria surpreso se o HTML5 tivesse um, no entanto.

Edit: Como eu pensei, HTML5 não tem esse recurso. Para definir sua página como HTML5, use o seguinte doctype (por exemplo: coloque isso como o primeiro texto em seu código-fonte). Observe que nem todos os navegadores suportam esse padrão, pois ele ainda está no formato de rascunho.

<!DOCTYPE html>
Henrik Paul
fonte
7
Todos os navegadores esperam que versões mais antigas do Konqueror o suportem. Até o IE6 suporta isso. É o doctype para ir.
BalusC
56

HTML 4 : Não

HTML 5 : Sim

O atributo de preenchimento automático é um atributo enumerado. O atributo tem dois estados. A palavra - chave on mapeia para o estado ligado e a palavra - chave off mapeia para o estado desligado. O atributo também pode ser omitido. O valor padrão ausente é o estado ligado . O estado desativado indica que, por padrão, os controles do formulário terão o nome do campo de preenchimento automático desativado ; o estado ligado indica que, por padrão, os controles do formulário terão o autofillnome do campo definido como "ativado".

Referência: W3

RuudKok
fonte
@ freestock.tk Sim, é mais claro que todos os outros. Simplicidade é importante.
OverCoder 5/05
32

Não, mas o preenchimento automático do navegador geralmente é acionado pelo campo com o mesmo nameatributo dos campos preenchidos anteriormente. Se você pudesse criar uma maneira inteligente de ter um nome de campo aleatório , o preenchimento automático não conseguiria extrair nenhum valor inserido anteriormente para o campo.

Se você der um nome a um campo de entrada como " email_<?= randomNumber() ?>" e, em seguida, fazer com que o script que recebe esse loop de dados através das variáveis ​​POST ou GET procurando algo que corresponda ao padrão " email_[some number]", você pode obter isso, e isso teria ( praticamente) sucesso garantido, independentemente do navegador .

Phantom Watson
fonte
6
Isso tornaria o teste automático mais difícil.
24515 David Waters
14
Isso tornaria os testes automáticos mais difíceis, apenas se o seu software de teste não conseguir lidar com campos de leitura / leitura que possam ter um número aleatório anexado a eles. Talvez seja hora de atualizar seu software de teste automatizado.
Corydoras
8
As informações de preenchimento automático ainda seriam salvas no diretório de dados do navegador, não?
Joey Adams
2
Presumivelmente. Mas não se esperaria que ele realmente aparecesse novamente para o usuário.
Fantasma Watson
1
O Chrome agora usa o atributo type = "password" em vez do atributo name para um site específico. Eu tenho name = "newpassword" autocomplete = 'off' type = "password" e ele é preenchido automaticamente! Se eu mudar o tipo, sem preenchimento automático
Enigma Plus
31

Não, um bom artigo está aqui no Mozila Wiki .

Eu continuaria usando o inválido attribute. Eu acho que é aqui que o pragmatismo deve conquistar a validação.

David Waters
fonte
23

Que tal configurá-lo com JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

Não é perfeito, mas seu HTML será válido.

Greg
fonte
8
Usar o javascript como solução alternativa para erros de validação é como varrer a poeira para debaixo do tapete. Embora o documento HTML possa se tornar válido, a página HTML + JS resultante não será.
fregante
11

Se você usa jQuery, pode fazer algo assim:

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

e use a classe autocompleteOff onde desejar:

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

Se você deseja que TODAS as suas informações sejam autocomplete=off, você pode simplesmente usar isso:

$(document).ready(function(){$("input").attr("autocomplete","off");});
Totoche
fonte
4
Usar o doctype HTML5 é mais fácil e melhor.
BalusC
5
isso não é html realmente válida de qualquer maneira, é só definir o (inválido) autocompleteatributo de uma forma diferente que não seja no html
matt b
Este código não funciona para mim; Eu usei o $('input.autocompleteOff').val('');que parece estar bem.
dqd
5
Usar o javascript como solução alternativa para erros de validação é como varrer a poeira para debaixo do tapete. Embora o documento HTML possa se tornar válido, a página HTML + JS resultante não será.
Fregante
8

Outra maneira - que também ajudará na segurança é chamar a caixa de entrada de algo diferente toda vez que você a exibe: exatamente como um captha. Dessa forma, a sessão pode ler a entrada única e o preenchimento automático não tem nada para continuar.

Apenas um ponto sobre a pergunta de rmeador sobre se você deve estar interferindo na experiência do navegador: desenvolvemos sistemas de gerenciamento de contatos e CRM e, quando você digita os dados de outras pessoas em um formulário, não deseja que ele sugira constantemente seus próprios detalhes.

Isso funciona para as nossas necessidades, mas temos o luxo de dizer aos usuários para obter um navegador decente :)

autocomplete='off'
Enigma Plus
fonte
8

autocomplete="off" isso deve corrigir o problema para todos os navegadores modernos.

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

Nas versões atuais dos navegadores Gecko, o atributo de preenchimento automático funciona perfeitamente. Para versões anteriores, voltando ao Netscape 6.2, funcionava com exceção dos formulários com "Endereço" e "Nome"

Atualizar

Em alguns casos, o navegador continuará sugerindo valores de preenchimento automático, mesmo se o atributo de preenchimento automático estiver desativado. Esse comportamento inesperado pode ser bastante intrigante para os desenvolvedores. O truque para realmente forçar o não preenchimento automático é atribuir uma sequência aleatória ao atributo , por exemplo:

autocomplete="nope"

Como esse valor aleatório não é a valid one, o navegador desistirá.

Documetation

Emilio Gort
fonte
Navegadores modernos não respeitam o preenchimento automático = desativado por opção. : / Infelizmente.
Alexus23:
@Alexus adicionado algum update ... mudança internet muito rápido
Emilio Gort
6

Usar um atributo 'nome' aleatório funciona para mim.

Redefino o atributo name ao enviar o formulário para que você ainda possa acessá-lo pelo nome quando o formulário for enviado. (usando o atributo id para armazenar o nome)

opznhaarlems
fonte
5

Observe que há alguma confusão sobre a localização do atributo de preenchimento automático. Ele pode ser aplicado à tag FORM inteira ou a tags INPUT individuais, e isso não foi padronizado antes do HTML5 (que permite explicitamente os dois locais ). Documentos mais antigos, notavelmente este artigo da Mozilla menciona apenas a tag FORM. Ao mesmo tempo, alguns scanners de segurança procuram apenas o preenchimento automático na tag INPUT e reclamam se estiver ausente (mesmo que esteja no FORM principal). Uma análise mais detalhada dessa bagunça é publicada aqui: Confusão nos atributos AUTOCOMPLETE = OFF nos formulários HTML .

kravietz
fonte
3

Não é o ideal, mas você pode alterar o ID e o nome da caixa de texto toda vez que a renderizar - você também precisará acompanhar o servidor para poder extrair os dados.

Não tenho certeza se isso vai funcionar ou não, foi apenas um pensamento.

Kieron
fonte
2

Eu acho que existe uma maneira mais simples. Crie uma entrada oculta com um nome aleatório (via javascript) e defina o nome de usuário para isso. Repita com a senha. Dessa forma, seu script de back-end sabe exatamente qual é o nome do campo apropriado, mantendo o preenchimento automático no escuro.

Provavelmente estou errado, mas é apenas uma ideia.

Cobras e café
fonte
2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
Jack Tuck
fonte
-1

Esta solução funciona comigo:

$('form,input,select,textarea').attr("autocomplete", "nope");

se você deseja usar o preenchimento automático nessa região: adicione o autocomplete="false"elemento ex:

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Hưng Trịnh
fonte
-5

Preenchimento automático válido desativado

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
Southampton Web Design
fonte
13
certamente, se um usuário tivesse o JS desativado, ele não poderá concluir um pedido, pois não poderá inserir o número do cartão? Melhor suplementar o atributo via JS, eu diria - na pior das hipóteses, JS off fornece ao campo do número do cartão o potencial de preenchimento automático, mas pelo menos eles podem fazer um pedido ... apenas um pensamento :)
Terry_Brown
3
Isso nem é engraçado.
Ricardo Pieper