Acerca de este problema HTML
El atributo autocomplete en elementos <form> controla si el navegador debe rellenar automáticamente los campos del formulario basándose en datos introducidos previamente. A diferencia del autocomplete en elementos <input> — que acepta un conjunto rico de tokens como "name", "email", "street-address", etc. — el elemento <form> en sí solo acepta dos valores: "on" y "off".
Una solución alternativa común que ganó popularidad fue establecer autocomplete="nope" (u otros valores inventados como "new-password", "false", o "disabled") en el elemento <form>. Este truco explotaba el hecho de que algunos navegadores tratarían cualquier valor no reconocido como una señal para desactivar el autocompletado. Sin embargo, este comportamiento no es estándar y no es fiable — los navegadores pueden ignorar valores inválidos por completo y volver a su comportamiento predeterminado, que normalmente es "on".
Usar valores de atributos inválidos causa varios problemas:
- Cumplimiento de estándares: La especificación HTML define explícitamente los valores permitidos, y los validadores marcarán cualquier otra cosa como un error.
- Comportamiento impredecible: Diferentes navegadores manejan valores inválidos de manera diferente. Lo que funciona en un navegador hoy puede dejar de funcionar en la próxima actualización.
- Accesibilidad y experiencia del usuario: Las tecnologías de asistencia y las funciones del navegador dependen de valores de atributos estándar para funcionar correctamente. Los valores inválidos pueden interferir con gestores de contraseñas y herramientas de autorrellenado de las que muchos usuarios dependen.
Vale la pena mencionar que incluso con autocomplete="off", algunos navegadores (particularmente Chrome) pueden seguir autocompletando ciertos campos como credenciales de inicio de sesión por razones de seguridad. Si necesitas un control más granular, aplica atributos autocomplete directamente en elementos <input> individuales usando los tokens de autorrellenado apropiados de la especificación.
Ejemplos
❌ Inválido: usando un valor inventado en un formulario
<form autocomplete="nope" action="/submit" method="post">
<label for="username">Username</label>
<input type="text" id="username" name="username">
<button type="submit">Submit</button>
</form>
Esto genera el error Valor incorrecto “nope” para el atributo “autocomplete” en el elemento “form” porque "nope" no es un valor de autocompletado válido para <form>.
✅ Corregido: usando el valor correcto para desactivar el autocompletado
<form autocomplete="off" action="/submit" method="post">
<label for="username">Username</label>
<input type="text" id="username" name="username">
<button type="submit">Submit</button>
</form>
✅ Usando autocomplete en inputs individuales para más control
Si necesitas desactivar el autocompletado para campos específicos mientras dejas otros habilitados, aplica el atributo directamente en los elementos <input>:
<form action="/submit" method="post">
<label for="username">Username</label>
<input type="text" id="username" name="username" autocomplete="username">
<label for="secret">One-time code</label>
<input type="text" id="secret" name="secret" autocomplete="off">
<button type="submit">Submit</button>
</form>
En este ejemplo, el campo de nombre de usuario usa el token estándar de autorrellenado "username" para ayudar a los navegadores a rellenarlo correctamente, mientras que el campo de código de un solo uso tiene el autocompletado desactivado ya que su valor nunca debe reutilizarse.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.
Más información: