Valor incorrecto “none” para el atributo “autocomplete” en el elemento “input”: La cadena “none” no es un nombre de campo de autocompletar válido.

El atributo autocomplete le dice al navegador cómo manejar el autocompletado de un campo de formulario. La especificación HTML define un conjunto estricto de valores permitidos: las palabras clave on y off, y una colección de nombres de campos de autocompletar como name, email, username, new-password, street-address, y muchos otros. El valor "none" no es parte de esta especificación, aunque podría parecer una opción lógica para “sin autocompletar”.

Esta confusión probablemente surge porque algunas APIs y frameworks no web usan "none" como palabra clave para deshabilitar características. En HTML, sin embargo, la palabra clave correcta para deshabilitar el autocompletado es "off". Usar un valor inválido como "none" lleva a un comportamiento indefinido del navegador — algunos navegadores pueden ignorarlo completamente y autocompletar de todas formas, mientras que otros podrían tratarlo como equivalente a "on". Esta inconsistencia puede causar experiencias de usuario inesperadas y posibles problemas de seguridad, especialmente para campos sensibles como contraseñas o números de tarjeta de crédito.

Más allá del cumplimiento de estándares, usar valores válidos de autocomplete mejora la accesibilidad. Las tecnologías de asistencia y los gestores de contraseñas dependen de nombres de campos de autocompletar reconocidos para ayudar a los usuarios a rellenar formularios de manera eficiente. Cuando se proporciona un valor válido y descriptivo como "username" o "email", los navegadores y herramientas de asistencia pueden ofrecer sugerencias más precisas.

Cómo solucionarlo

Reemplaza "none" con el valor válido apropiado:

• Usa "off" si quieres deshabilitar el autocompletado para el campo.
• Usa "on" si quieres que el navegador decida cómo autocompletar el campo.
• Usa un nombre de campo de autocompletar específico si quieres dar una pista sobre el tipo de datos esperado.

Los nombres de campos de autocompletar comunes incluyen: name, given-name, family-name, email, username, new-password, current-password, tel, street-address, postal-code, country, cc-number, cc-exp, y cc-name. También puedes combinar tokens, como "shipping postal-code" o "billing cc-number", para proporcionar contexto adicional a través de tokens de sección y pista.

Nota: Incluso con autocomplete="off", algunos navegadores pueden seguir autocompletando ciertos campos (particularmente credenciales de inicio de sesión) por razones de seguridad o usabilidad. Este es un comportamiento específico del navegador y no algo que la especificación HTML pueda anular.

Ejemplos

Incorrecto: usar "none" para deshabilitar el autocompletado

<form>
  <label for="user">Nombre de usuario</label>
  <input type="text" id="user" name="username" autocomplete="none">
</form>

Correcto: usar "off" para deshabilitar el autocompletado

<form>
  <label for="user">Nombre de usuario</label>
  <input type="text" id="user" name="username" autocomplete="off">
</form>

Correcto: usar un nombre de campo de autocompletar específico

Cuando sabes qué tipo de datos recopila un campo, proporcionar un nombre de campo de autocompletar descriptivo suele ser mejor que usar "on" o "off". Esto ayuda a los navegadores a ofrecer sugerencias precisas:

<form>
  <label for="user">Nombre de usuario</label>
  <input type="text" id="user" name="username" autocomplete="username">

  <label for="email">Email</label>
  <input type="email" id="email" name="email" autocomplete="email">

  <label for="pwd">Nueva contraseña</label>
  <input type="password" id="pwd" name="password" autocomplete="new-password">
</form>

Correcto: usar tokens de sección y pista

Puedes prefijar un nombre de campo de autocompletar con un nombre de sección o una pista de shipping/billing para distinguir entre múltiples direcciones en el mismo formulario:

<form>
  <label for="ship-zip">Código postal de envío</label>
  <input type="text" id="ship-zip" name="ship_zip" autocomplete="shipping postal-code">

  <label for="bill-zip">Código postal de facturación</label>
  <input type="text" id="bill-zip" name="bill_zip" autocomplete="billing postal-code">
</form>

Más información:

MDN Reference

MDN: autocomplete

→