¿Hay una forma válida de W3C para deshabilitar el autocompletado en un formulario HTML?


Cuando se utiliza el xhtml1-transitional.dtd doctype, recoger un número de tarjeta de crédito con el siguiente HTML

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

Marcará una advertencia en el validador W3C:

No hay atributo "autocompletar".

¿Existe una forma W3C / standards de deshabilitar el autocompletado del navegador en campos sensibles en un formulario?

Author: Kos, 2009-02-24

16 answers

Aquí es un buen artículo del MDC que explica los problemas (y soluciones) para formar autocompletado. Microsoft ha publicado algo similar aquí, también.

Para ser honesto, si esto es algo importante para sus usuarios, 'romper' los estándares de esta manera parece apropiado. Por ejemplo, Amazon utiliza el atributo' autocompletar ' bastante, y parece funcionar bien.

Si desea eliminar la advertencia por completo, puede usar JavaScript para aplicar el atribuir a los navegadores que lo soportan (IE y Firefox son los navegadores importantes) usando someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Finalmente, si su sitio está utilizando HTTPS, IE desactiva automáticamente el autocompletado (al igual que algunos otros navegadores, por lo que sé).

Actualización

Como esta respuesta todavía recibe bastantes votos positivos, solo quería señalar que en HTML5, puede usar el atributo 'autocompletar' en su elemento de formulario. Véase la documentación del 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-25 17:29:21

Me sorprendería mucho si el W3C hubiera propuesto una forma que funcionara con (X)HTML4. La función de autocompletar está completamente basada en navegador, y se introdujo durante los últimos años (mucho después de que se escribiera el estándar HTML4).

No se sorprendería si HTML5 tuviera uno, sin embargo.

Editar: Como pensé, HTML5 tiene esa característica. Para definir su página como HTML5, utilice el siguiente doctype (es decir: ponga esto como el primer texto en su código). Tenga en cuenta que no todos los navegadores admiten este estándar, ya que todavía está en forma de borrador.

<!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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-07 12:31:43

HTML 4 : No

HTML 5 : Sí

El atributo autocompletar es un atributo enumerado. Atributo tiene dos estados. La palabra clave on se asigna al estado on, y la palabra clave off la palabra clave se asigna al estado off. El atributo también puede omitirse. El el valor que falta por defecto es el en el estado. El estado off indica que por por defecto, los controles de formulario en el formulario tendrán su nombre de campo de autocompletar establecer en off; el estado on indica que, por defecto, el formulario controla en el formulario tendrá su nombre de campo autofill establecido en "on".

Referencia: 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-03-28 16:05:25

No, un buen artículo es aquí en Mozila Wiki.

Continuaría usando el attribute no válido. Creo que aquí es donde el pragmatismo debe ganar a la validación.

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-27 08:01:48

No, pero el autocompletado del navegador a menudo se desencadena por el campo que tiene el mismo atributo name que los campos que se rellenaron previamente. Si pudiera configurar una forma inteligente de tener un nombre de campo aleatorio , autocompletar no sería capaz de extraer ningún valor ingresado previamente para el campo.

Si fuera a dar un campo de entrada un nombre como " email_<?= randomNumber() ?>", y luego tener el script que recibe este bucle de datos a través del POST o OBTENER variables en busca de algo que coincida con el pattern " email_[some number]", podrías lograr esto, y esto tendría (prácticamente) éxito garantizado, independientemente del navegador.

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-24 15:48:41

¿Qué tal configurarlo con JavaScript?

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

No es perfecto, pero su HTML será válido.

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-11-20 11:39:30

Sugiero capturar los 4 tipos de entrada:

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

Referencia:

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-30 10:09:33

Si usas jQuery, puedes hacer algo así :

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

Y usa la clase autocompleteOff donde quieras:

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

Si quieres que toda tu entrada sea autocomplete=off, simplemente puedes usar eso:

$(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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-30 10:10:28

Otra forma - que también ayudará con la seguridad es llamar a la caja de entrada algo diferente cada vez que la muestre: al igual que un captha. De esa manera, la sesión puede leer la entrada de una sola vez y Autocompletar no tiene nada para continuar.

Solo un punto con respecto a la pregunta de rmeader de si debe interferir con la experiencia del navegador: Desarrollamos sistemas de Gestión de contactos y CRM, y cuando escribe los datos de otras personas en un formulario que no desea constantemente sugiriendo sus propios detalles.

Esto funciona para nuestras necesidades, pero luego tenemos el lujo de decirle a los usuarios que obtengan un navegador decente:)

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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-15 08:21:29

autocomplete="off" esto debería solucionar el problema para todos los navegadores modernos.

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

En las versiones actuales de los navegadores Gecko, el atributo autocompletar funciona perfectamente. Para versiones anteriores, volviendo a Netscape 6.2, funcionó con la excepción de los formularios con "Dirección" y "Nombre"

Update

En algunos casos, el navegador seguirá sugiriendo valores de autocompletado incluso si el atributo autocomplete está desactivado. Este comportamiento inesperado puede ser bastante desconcertante para desarrollador. El truco para forzar realmente el no-autocompletado es asignar una cadena aleatoria al atributo , por ejemplo:

autocomplete="nope"

Dado que este valor aleatorio no es un valid one, el navegador se rendirá.

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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-27 15:30:31

Usar un atributo 'name' aleatorio funciona para mí.

Restablezco el atributo name al enviar el formulario para que aún pueda acceder a él por nombre cuando se envíe el formulario. (usando el atributo id para almacenar el nombre)

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-01-22 21:05:22

Tenga en cuenta que hay cierta confusión sobre la ubicación del atributo autocompletar. Se puede aplicar a toda la etiqueta de FORMULARIO o a etiquetas de ENTRADA individuales, y esto no estaba realmente estandarizado antes de HTML5 (que permite explícitamente ambos locations ). Más notablemente este artículo de Mozilla solo menciona la etiqueta DEL FORMULARIO. Al mismo tiempo, algunos escáneres de seguridad solo buscarán autocompletar en la etiqueta de ENTRADA y se quejarán si falta (incluso si está en el formulario para padres). Un análisis más detallado de este lío se publica aquí: Confusión sobre atributos AUTOCOMPLETAR=OFF en formularios 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-02-07 11:43:51

No es ideal, pero podría cambiar el id y el nombre del cuadro de texto cada vez que lo renderice; también tendría que rastrearlo del lado del servidor para poder obtener los datos.

No estoy seguro de si esto funcionará o no, fue solo un pensamiento.

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-02-24 15:49:54

Creo que hay una manera más simple. Cree una entrada oculta con un nombre aleatorio (a través de javascript)y establezca el nombre de usuario en ese. Repita con la contraseña. De esta manera, su script de backend sabe exactamente cuál es el nombre de campo apropiado, mientras mantiene autocompletar en la oscuridad.

Probablemente me equivoque, pero es solo una idea.

 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/ajaxhispano.com/template/agent.layouts/content.php on line 61
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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-30 17:48:57

Autocompletar válido apagado

<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/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-04-09 15:31:48