web-dev-qa-db-pt.com

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

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

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

irá marcar um aviso no validador W3C:

não há atributo "autocomplete".

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

418
matt b

Aqui é um bom artigo do MDC que explica os problemas (e soluções) para formar o autocompletar. 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 'autocomplete' e parece funcionar bem.

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

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

Atualizar

Como essa resposta ainda recebe alguns votos positivos, eu só queria ressaltar que, em HTML5, você pode usar o atributo 'autocomplete' em seu elemento de formulário. Veja o documentação no W3C para ele.

417
Nick Presta

Eu ficaria muito surpreso se o W3C tivesse proposto uma maneira que funcionasse com o (X) HTML4. O recurso de autocompletar é totalmente baseado em navegador e foi introduzido nos últimos anos (bem depois que o padrão HTML4 foi escrito).

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

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

<!DOCTYPE html>
63
Henrik Paul

HTML 4 : Não

HTML 5 : sim

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

Referência: W

56
RuudKok

Não, mas o preenchimento automático do navegador geralmente é acionado pelo campo com o mesmo atributo name que os campos preenchidos anteriormente. Se você pudesse criar uma forma inteligente de ter nome de campo aleatório, o preenchimento automático não seria capaz de extrair nenhum valor inserido anteriormente para o campo.

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

32
Phantom Watson

Não, um bom artigo está aqui em Mozilla Wiki.

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

31
David Waters

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.

23
Greg

Eu sugiro pegar todos os 4 tipos de entrada:

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

Referência:

19
Malartre

Se você usa o jQuery, você pode fazer algo assim:

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

e use a classe autocompleteOff onde você deseja:

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

Se você quiser que TODAS as suas entradas sejam autocomplete=off, você pode simplesmente usar isto:

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

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 autocomplete funciona perfeitamente. Para versões anteriores, voltando ao Netscape 6.2, ele funcionava com a exceção de formulários com "Address" e "Name"

Atualizar

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

autocomplete="nope"

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

Documetação

8
Emilio Gort

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

Apenas um ponto em relação à pergunta do rmeador sobre se você deve estar interferindo na experiência do navegador: Desenvolvemos sistemas de gerenciamento de contatos e CRM, e quando você está digitando dados de outras pessoas em um formulário, não deseja constantemente sugerir seus próprios detalhes.

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

autocomplete='off' 
8
Enigma Plus

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

Eu redefinir 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)

6
opznhaarlems

Observe que há alguma confusão sobre a localização do atributo autocomplete. Ele pode ser aplicado a toda a tag FORM ou a tags INPUT individuais, e isso não foi realmente padronizado antes do HTML5 (que permite explicitamente bothlocations ). Os documentos mais antigos, principalmente artigo do Mozilla apenas mencionam a tag FORM. Ao mesmo tempo, alguns scanners de segurança só procurarão pelo autocomplete na tag INPUT e reclamarão se estiver faltando (mesmo que seja no FORM para pai). Uma análise mais detalhada dessa bagunça é postada aqui: Confusão sobre os atributos AUTOCOMPLETE = OFF nos formulários HTML .

5
kravietz

Não é o ideal, mas você pode alterar o id e o nome da caixa de texto toda vez que for renderizada - você teria que rastrear o servidor também para poder obter os dados.

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

3
Kieron
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");
        }
    }
}
2
Jack Tuck

Eu acho que há um jeito 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 backend sabe exatamente qual é o nome do campo apropriado, mantendo o preenchimento automático no escuro.

Eu provavelmente estou errado, mas é apenas uma ideia.

2
Snakes and Coffee