Acerca de este problema HTML
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 autocompletado como name, email, username, new-password, street-address, y muchos otros. El valor "none" no es parte de esta especificación, aunque pueda parecer una opción lógica para “sin autocompletado”.
Esta confusión probablemente surge porque algunas APIs y frameworks que no son web usan "none" como palabra clave para desactivar funciones. En HTML, sin embargo, la palabra clave correcta para desactivar 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 tarjetas 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 administradores de contraseñas dependen de nombres de campos de autocompletado reconocidos para ayudar a los usuarios a llenar 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 desactivar el autocompletado para el campo. -
Usa
"on"si quieres que el navegador decida cómo autocompletar el campo. - Usa un nombre de campo de autocompletado específico si quieres dar una pista sobre el tipo de datos esperado.
Los nombres de campos de autocompletado 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 desactivar el autocompletado
<form>
<label for="user">Username</label>
<input type="text" id="user" name="username" autocomplete="none">
</form>
Correcto: usar "off" para desactivar el autocompletado
<form>
<label for="user">Username</label>
<input type="text" id="user" name="username" autocomplete="off">
</form>
Correcto: usar un nombre de campo de autocompletado específico
Cuando sabes qué tipo de datos recopila un campo, proporcionar un nombre de campo de autocompletado descriptivo es a menudo mejor que usar "on" o "off". Esto ayuda a los navegadores a ofrecer sugerencias precisas:
<form>
<label for="user">Username</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">New Password</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 autocompletado con un nombre de sección o pista de shipping/billing para distinguir entre múltiples direcciones en el mismo formulario:
<form>
<label for="ship-zip">Shipping postal code</label>
<input type="text" id="ship-zip" name="ship_zip" autocomplete="shipping postal-code">
<label for="bill-zip">Billing postal code</label>
<input type="text" id="bill-zip" name="bill_zip" autocomplete="billing postal-code">
</form>
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: