Acerca de este problema HTML
El atributo autocomplete indica a los navegadores si deben autocompletar un campo de formulario y cómo hacerlo. La especificación HTML define un conjunto estricto de valores válidos para este atributo, conocidos como nombres de campo de autocompletado. Estos incluyen valores como "on", "off", "name", "email", "username", "new-password", "current-password", "address-line1", "postal-code", "cc-number", y muchos otros. Cuando usas un valor que no aparece en esta lista — como "nothanks", "nope", o "false" — el validador de W3C lo reporta como un nombre de campo de autocompletado inválido.
Una razón común por la que los desarrolladores usan valores inventados es la frustración por que los navegadores ignoren autocomplete="off". Algunos navegadores (especialmente Chrome) pueden seguir autocompletando ciertos campos incluso cuando se establece autocomplete="off", particularmente para campos relacionados con el inicio de sesión. Esto ha llevado a soluciones alternativas usando cadenas aleatorias, pero estas no son estándar y pueden producir comportamientos impredecibles en diferentes navegadores y tecnologías de asistencia.
Por qué esto importa
- Cumplimiento de estándares: Los valores de atributo inválidos hacen que tu HTML no sea conforme, lo que puede llevar a comportamientos inesperados del navegador ahora o en el futuro.
-
Accesibilidad: Los lectores de pantalla y otras tecnologías de asistencia pueden usar el atributo
autocompletepara ayudar a los usuarios a rellenar formularios. Un valor reconocido como"name"o"email"proporciona contexto significativo a estas herramientas, mientras que una cadena aleatoria no proporciona ninguno. -
Comportamiento del navegador: Los navegadores están diseñados para interpretar los valores estándar. Un valor no reconocido puede tratarse de manera inconsistente — algunos navegadores pueden ignorarlo, otros pueden tratarlo como
"on", y el comportamiento podría cambiar entre versiones.
Cómo solucionarlo
Si quieres desactivar el autocompletado, usa "off":
<input type="text" name="search" autocomplete="off">
Si quieres ayudar a los navegadores a autocompletar correctamente, usa el nombre de campo de autocompletado apropiado de la especificación:
<input type="email" name="email" autocomplete="email">
Si autocomplete="off" no está siendo respetado por el navegador (un problema conocido con algunos campos de inicio de sesión en Chrome), considera estas alternativas que cumplen con los estándares:
-
Usa
autocomplete="new-password"en campos de contraseña donde no quieras que se sugieran contraseñas guardadas. - Usa un token válido más específico que no coincida con lo que el navegador está tratando de autocompletar.
-
Usa el atributo
readonlyy quítalo al enfocar mediante JavaScript como medida suplementaria.
Ejemplos
❌ Inválido: cadena arbitraria como valor de autocomplete
<form>
<label for="firstName">Nombre</label>
<input type="text" name="firstName" id="firstName" autocomplete="nothanks">
<label for="userEmail">Email</label>
<input type="email" name="userEmail" id="userEmail" autocomplete="nope">
</form>
Tanto "nothanks" como "nope" no son nombres de campo de autocompletado válidos y provocarán el error de validación.
✅ Válido: usar "off" para desactivar el autocompletado
<form>
<label for="firstName">Nombre</label>
<input type="text" name="firstName" id="firstName" autocomplete="off">
<label for="userEmail">Email</label>
<input type="email" name="userEmail" id="userEmail" autocomplete="off">
</form>
✅ Válido: usar nombres de campo de autocompletado apropiados
<form>
<label for="firstName">Nombre</label>
<input type="text" name="firstName" id="firstName" autocomplete="given-name">
<label for="userEmail">Email</label>
<input type="email" name="userEmail" id="userEmail" autocomplete="email">
<label for="newPass">Nueva contraseña</label>
<input type="password" name="newPass" id="newPass" autocomplete="new-password">
</form>
Usar tokens descriptivos de autocompletado como "given-name", "email", y "new-password" es el mejor enfoque cuando quieres que los navegadores y las tecnologías de asistencia entiendan tus campos de formulario. Para obtener una lista completa de nombres de campo de autocompletado válidos, consulta la sección de autocompletado de la especificación HTML de WHATWG.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.