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

El atributo autocomplete le dice al navegador cómo manejar el autorrelleno para un campo de formulario. La especificación HTML define un conjunto estricto de valores válidos, que incluyen "on", "off", y una lista de nombres de campos de autorrelleno como "username", "new-password", "cc-number", "postal-code", y muchos otros. Cuando usas un valor que no está en esta lista — como "nope", "false", "none", o cualquier otra cadena inventada — el validador W3C lo reporta como un nombre de campo de autorrelleno inválido.

Una razón común por la que los desarrolladores usan valores como "nope" es como una solución alternativa porque algunos navegadores históricamente ignoraban autocomplete="off". En versiones anteriores de Chrome y Firefox, el navegador aún mostraba sugerencias de autorrelleno incluso cuando se establecía off, así que los desarrolladores descubrieron que usar un valor no reconocido como "nope" efectivamente engañaba al navegador para que no mostrara sugerencias. Aunque este truco pudo haber funcionado en la práctica, produce HTML inválido y no es una solución confiable a largo plazo ya que el comportamiento del navegador con valores no reconocidos puede cambiar en cualquier momento.

Por qué es importante

• Cumplimiento de estándares: Los valores de atributos inválidos hacen que tu HTML no sea conforme, lo que puede causar problemas con herramientas, pipelines de pruebas y auditores de accesibilidad.
• Accesibilidad: Los lectores de pantalla y tecnologías asistivas dependen de valores autocomplete válidos para ayudar a los usuarios a rellenar formularios. Usar un nombre de campo de autorrelleno correcto como "given-name" o "email" puede mejorar significativamente la experiencia para usuarios con discapacidades. De hecho, el Criterio de Éxito 1.3.5 de WCAG 2.1 específicamente recomienda usar valores autocomplete válidos para campos que recopilan información del usuario.
• Comportamiento del navegador: Los navegadores modernos han mejorado su manejo de autocomplete="off". Usar el valor estándar es ahora más confiable de lo que solía ser, y usarlo correctamente asegura un comportamiento predecible entre navegadores.

Cómo solucionarlo

1. Para desactivar el autocompletado, reemplaza el valor inválido con "off".
2. Para habilitar el autorrelleno inteligente, usa el nombre de campo de autorrelleno apropiado de la lista de nombres de campos de autorrelleno de la especificación HTML. Este es el enfoque preferido para la mayoría de formularios orientados al usuario.
3. Para nuevas contraseñas (por ejemplo, formularios de registro o cambio de contraseña), usa "new-password" — esto le dice al navegador que sugiera una contraseña generada en lugar de rellenar una guardada.

Ejemplos

Inválido: valor de autocomplete inventado

<input type="text" name="firstName" autocomplete="nope">

Otros valores inválidos comunes que desencadenan el mismo error incluyen "false", "none", "disable", y "no".

Corregido: desactivando el autocompletado con "off"

<input type="text" name="firstName" autocomplete="off">

Corregido: usando un nombre de campo de autorrelleno válido

Usar un nombre de campo de autorrelleno específico es a menudo mejor que "off" porque ayuda a los navegadores y tecnologías asistivas a entender el propósito del campo:

<input type="text" name="firstName" autocomplete="given-name">

Corregido: valores autocomplete válidos comunes en un formulario

<form method="post" action="/register">
  <label for="name">Nombre completo</label>
  <input type="text" id="name" name="name" autocomplete="name">

  <label for="email">Correo electrónico</label>
  <input type="email" id="email" name="email" autocomplete="email">

  <label for="newpass">Contraseña</label>
  <input type="password" id="newpass" name="password" autocomplete="new-password">

  <label for="tel">Teléfono</label>
  <input type="tel" id="tel" name="phone" autocomplete="tel">

  <button type="submit">Registrarse</button>
</form>

Algunos de los valores válidos más comúnmente usados incluyen: "name", "given-name", "family-name", "email", "username", "new-password", "current-password", "street-address", "postal-code", "country", "tel", "cc-number", y "organization". Consulta la lista completa en la especificación HTML para todas las opciones disponibles.

Más información:

WHATWG Spec

HTML Spec: autocomplete

→