Czy istnieje W3C prawidłowy sposób wyłączenia autouzupełniania w formularzu HTML?

Podczas korzystania z doctype xhtml1-transitional.dtd, pobranie numeru karty kredytowej z następującym kodem HTML 

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

Wyświetli ostrzeżenie na walidatorze W3C:

Nie ma atrybutu "autouzupełnianie".

Czy istnieje sposób W3C / standards, aby wyłączyć automatyczne wypełnianie przeglądarki na wrażliwych polach w formularzu?

Author: Kos, 2009-02-24
Source

16 answers

Tutaj {[3] } jest dobry artykuł z MDC, który wyjaśnia problemy (i rozwiązania) tworzenia autouzupełniania. Microsoft opublikował coś podobnego tutaj, jak również.

Szczerze mówiąc, jeśli jest to coś ważnego dla użytkowników, "łamanie" standardów w ten sposób wydaje się właściwe. Na przykład Amazon używa atrybutu "autouzupełnianie" dość dużo i wydaje się, że działa dobrze.

Jeśli chcesz całkowicie usunąć ostrzeżenie, możesz użyć JavaScript, aby zastosować atrybut do przeglądarek, które go obsługują (IE i Firefox są ważnymi przeglądarkami) za pomocą someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Wreszcie, jeśli witryna używa HTTPS, IE automatycznie wyłącza autocompletion(jak w niektórych innych przeglądarkach, o ile wiem).

Update

Ponieważ ta odpowiedź wciąż ma sporo pozytywnych opinii, chciałem tylko zaznaczyć, że w HTML5 możesz użyć atrybutu "autouzupełnianie" na elemencie formularza. Zobacz dokumentację na W3C.

 409
Author: Nick Presta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-25 17:29:21

Byłbym bardzo zaskoczony, gdyby W3C zaproponował sposób, który będzie działał z (X)HTML4. Funkcja autouzupełniania jest całkowicie oparta na przeglądarce i została wprowadzona w ciągu ostatnich lat (dużo po napisaniu standardu HTML4).

Nie zdziwiłbym się, gdyby HTML5 miał taki.

Edit: tak jak myślałem, HTML5 czy ma tę funkcję. Aby zdefiniować swoją stronę jako HTML5, użyj następującego doctype (tj. kod źródłowy). Zauważ, że nie wszystkie przeglądarki obsługują ten standard, ponieważ jest on nadal w wersji roboczej.

<!DOCTYPE html>
 63
Author: Henrik Paul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-07 12:31:43

HTML 4 : No

HTML 5 : Tak

Atrybut autouzupełnianie jest atrybutem wyliczonym. Atrybut ma dwa stany. on mapuje do stanu on i off mapy ze słowem kluczowym do stanu wyłączonego. Atrybut można również pominąć. Na brakująca wartość domyślna to stan on . Stan off wskazuje, że przez domyślnie, kontrolki formularza w formularzu będą miały nazwę pola autouzupełniania set to off ; Stan on wskazuje, że domyślnie, form controls in formularz będzie miał nazwę pola autofill ustawioną na "on".

Reference: W3

 56
Author: RuudKok,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-28 16:05:25

Nie, dobry artykuł jest tutaj w Mozila Wiki.

Nadal używałbym nieprawidłowego attribute. Myślę, że tutaj pragmatyzm powinien wygrać z walidacją.

 31
Author: David Waters,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-27 08:01:48

Nie, ale automatyczne wypełnianie przeglądarki jest często uruchamiane przez pole posiadające ten sam atrybut name, co pola, które zostały wcześniej wypełnione. Jeśli mógłbyś wymyślić sprytny sposób na posiadanie randomizowanej nazwy pola, autouzupełnianie nie byłoby w stanie pobrać żadnych wcześniej wprowadzonych wartości dla tego pola.

Jeśli chcesz nadać pole wejściowe o nazwie " email_<?= randomNumber() ?>", a następnie mieć skrypt, który odbiera tę pętlę danych przez POST lub uzyskać zmienne szukające czegoś pasującego do wzorzec " email_[some number]", można by to zrobić, a to by (praktycznie) gwarantowało sukces, niezależnie od przeglądarki .

 30
Author: Phantom Watson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-24 15:48:41

Co powiesz na ustawienie go za pomocą JavaScript?

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

To nie jest idealne, ale twój HTML będzie poprawny.

 23
Author: Greg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-11-20 11:39:30

Proponuję wyłapać wszystkie 4 rodzaje wejść: 

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

Odniesienie:

 19
Author: Malartre,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-30 10:09:33

Jeśli używasz jQuery, możesz zrobić coś takiego: 

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

I użyj klasy autocompleteOff gdzie chcesz: 

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

Jeśli chcesz, aby wszystkie dane wejściowe były autocomplete=off, możesz po prostu użyć tego : 

$(document).ready(function(){$("input").attr("autocomplete","off");});
 11
Author: Totoche,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-30 10:10:28

Innym sposobem-który pomoże również w zabezpieczeniach, jest nazywanie pola wejściowego czymś innym za każdym razem, gdy go wyświetlasz: tak jak captha. W ten sposób sesja może odczytać jednorazowe wejście i autouzupełnianie nie ma nic do zrobienia.

Tylko kwestia dotycząca pytania rmeadora, czy powinieneś ingerować w doświadczenie przeglądarki: rozwijamy Systemy zarządzania kontaktami i CRM, a gdy wpisujesz dane innych osób do formularza, nie chcesz ich stale sugerowanie własnych szczegółów.

To działa na nasze potrzeby, ale wtedy mamy Luksus mówienia użytkownikom, aby dostali przyzwoitą przeglądarkę:) 

autocomplete='off'
 8
Author: Enigma Plus,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-15 08:21:29

autocomplete="off" powinno to rozwiązać problem we wszystkich nowoczesnych przeglądarkach.

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

W obecnych wersjach przeglądarek Gecko atrybut autocomplete działa doskonale. W przypadku wcześniejszych wersji, wracając do Netscape 6.2, działał z wyjątkiem formularzy z "adresem " i"nazwą"

Update

W niektórych przypadkach przeglądarka będzie nadal sugerować wartości autocomplete, nawet jeśli atrybut autocomplete jest ustawiony na off. To nieoczekiwane zachowanie może być dość zastanawiające dla deweloperzy. Sztuczka, aby naprawdę wymusić brak autocompletion jest przypisanie losowego ciągu do atrybutu , na przykład: 

autocomplete="nope"

Ponieważ ta losowa wartość nie jest valid one, przeglądarka zrezygnuje.

Documetation

 8
Author: Emilio Gort,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-27 15:30:31

Używanie przypadkowego atrybutu 'name' działa dla mnie.

Zresetowałem atrybut name podczas wysyłania formularza, więc nadal możesz uzyskać do niego dostęp po nazwie podczas wysyłania formularza. (używając atrybutu id do przechowywania nazwy)

 6
Author: opznhaarlems,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-22 21:05:22

Zauważ, że istnieje pewne zamieszanie co do lokalizacji atrybutu autocomplete. Może być stosowany zarówno do całego tagu formularza, jak i do pojedynczych znaczników wejściowych, a to nie było tak naprawdę ustandaryzowane przed HTML5 (co jawnie pozwala ZARÓWNO lokalizacje ). Starsze dokumenty, w szczególności ten artykuł Mozilli wspomina tylko o znaczniku formularza. Jednocześnie niektóre Skanery bezpieczeństwa będą szukać autouzupełniania tylko w tagu wejściowym i narzekać, jeśli go brakuje (nawet jeśli jest w forma rodzica). Bardziej szczegółowa analiza tego bałaganu znajduje się tutaj: zamieszanie wokół atrybutów AUTOCOMPLETE = OFF w formularzach HTML .

 5
Author: kravietz,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-07 11:43:51

Nie idealne, ale można zmienić id i nazwę pola tekstowego za każdym razem, gdy go renderujesz - trzeba by go śledzić po stronie serwera, aby uzyskać dane.

Nie wiem, czy to zadziała, czy nie, to była tylko myśl.

 3
Author: Kieron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-02-24 15:49:54

Myślę, że jest prostszy sposób. Utwórz ukryte wejście o losowej nazwie (przez javascript) i ustaw nazwę Użytkownika na tę. Powtórz hasło. W ten sposób skrypt zaplecza dokładnie wie, jaka jest odpowiednia nazwa pola, zachowując autouzupełnianie w ciemności.

Pewnie się mylę, ale to tylko pomysł.

 2
Author: Snakes and Coffee,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-08-01 00:43:39 
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
Author: Jack Tuck,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-30 17:48:57

Ważne autouzupełnianie wyłączone 

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
 -5
Author: Southampton Web Design,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-04-09 15:31:48